今天遇到一个需求,就是在通过 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