下拉框jQuery动态赋值

最新推荐文章于 2022-03-03 14:09:10 发布

原创最新推荐文章于 2022-03-03 14:09:10 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #jQuery

jQuery 同时被 2 个专栏收录

1 篇文章

订阅专栏

HTML

1 篇文章

订阅专栏

本文介绍如何使用HTML与JavaScript结合AJAX技术动态地为Select元素添加选项，并展示了一个具体示例，包括从服务器获取数据并更新Select元素的完整过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="./assets/libs/jsLibs/jquery.min.js"></script>
</head>
<body>
    <div>
        <select id="test" onchange="get()">
            <option value="1">测试1</option>
            <option value="2">测试2</option>
            <option value="3">测试3</option>
            <option value="4">测试4</option>
        </select>
        <button onclick="addoption()">添加</button>
    </div>
</body>
<script>
    function addoption() {
        $.ajax({
            url: '<%=root%>/employ/bmfwAction!getBillCompanyBilProvCdAndType',
            type: 'post',
            data: 'billStyle=' + billStyle + '&provCd=' + provCd,
            success: function (data) {
                $.each(data, function (infoIndex, info) {  //循环遍历后台传过来的json数据  
                    $("#test").append("<option value='" + info["sex"] + "'>" + info["name"] + "</option>");
                    // $("#test").append("<option value='5'>测试5</option>");   //为Select追加一个Option(下拉项)
                    // $("#test").prepend("<option value='0'>测试6</option>");   //为Select插入一个Option(第一个位置)
                });
            }
        });
        // $.getJSON("jsontest.json", function (data) {
        //     $.each(data, function (infoIndex, info) {
        //         $("#test").append("<option value='" + info["sex"] + "'>" + info["name"] + "</option>");
        //     })
        //     console.log(strHtml);
        // })
    }
    function get() {
        // 获取选中的option的文本
        var a=obj.options[obj.selectedIndex].innerHTML;
        //改变下拉框的默认项
        document.getElementById("test")[2].selected = true;
        alert($("#test").find("option:selected").attr("value"));//原生  
        // alert($("#test").find("option:selected").val());  //加入jq库
    }
</script>
</html>