今天遇到一个需求，就是在通过 webAPI 获取到一组 JSON 数组之后，如何将这个数组加载到 select 的 option 中。百度之后找到解决方法经过整理后的代码如下，可以封装一个方法来使用。

2020-10-13 记：

今天记录了 JQUERY 对 SELECT 的其它的操作，比如：获取、添加、删除、清空。（长时间没有接触已经忘记得差不多了）

$.getJSON('webAPI', params,
        function (data) {
            var s = $(sel);  // DOM 对象转化为jquery对象
            s.empty();//清除select中的 option
            $.each(data, function (index, item) {
                var opt = $("<option>").text(item.name).val(item.id);
                s.append(opt);
            });
        });

jQuery 获取 Select 选择的 Text 和 Value

//为Select添加事件，当选择其中一项时触发
$("#select_id").change(function(){//code...}); 

//获取Select选择的text
var checkText=$("#select_id").find("option:selected").text();

//获取Select选择的Value
var checkValue=$("#select_id").val();

//获取Select选择的索引值
var checkIndex=$("#select_id ").get(0).selectedIndex;

//获取Select最大的索引值
var maxIndex=$("#select_id option:last").attr("index");

jQuery 添加/删除 Select 的 Option 项

 //为Select追加一个Option(下拉项)
$("#select_id").append("<option value='Value'>Text</option>");
 
 //为Select插入一个Option(第一个位置)
$("#select_id").prepend("<option value='0'>请选择</option>");
 
 //删除Select中索引值最大Option(最后一个)
$("#select_id option:last").remove(); 

 //删除Select中索引值为0的Option(第一个)
$("#select_id option[index='0']").remove();

 //删除Select中Value='3'的Optiona
$("#select_id option[value='3']").remove();

 //删除Select中Text='4'的Optiona
$("#select_id option[text='4']").remove();

内容清空：

$("#charCity").empty();

转载请注明：隨習筆記 » jquery 动态将JSON加载到 select