JS与jQuery动态添加Select选项的方法对比

JS与jQuery动态添加Select选项的方法对比

近日有开发者咨询如何在<select>元素中动态插入<option>选项。起初以为是纯JavaScript实现，但实际场景中对方使用了jQuery，导致操作失败。本文旨在梳理并记录原生JavaScript与jQuery在添加选项时的具体区别。

原生JavaScript实现

使用原生JavaScript实现：

var selid = document.getElementById("sltid");
for(var i=0; i<10;i++){ //循环添加多个值
sid.option[i] = new Option(i,i);
}
sid.options[sid.options.length]=new Option("1","2"); // 在最后一个值后面添加多一个

jQuery实现

使用jQuery实现：

$("#selectId").append("<option value='"+value+"'>"+text+"</option>");

除了基本的添加操作，实际开发中常涉及设置默认选中项、获取首尾或第N个选项等需求。因此，整理了一些常用的jQuery操作Select的片段供参考。

获取Select选中状态

jQuery获取Select选中的文本与值：

1. $("#select_id").change(function(){//code...}); // 为Select绑定change事件，当选中项改变时触发

2. var checkText=$("#select_id").find("option:selected").text(); // 获取当前选中的文本内容

3. var checkValue=$("#select_id").val(); // 获取当前选中的值

4. var checkIndex=$("#select_id ").get(0).selectedIndex; // 获取当前选中项的索引值

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

添加或删除Option项

jQuery添加或删除Select的Option项：

1. $("#select_id").append("<option value='Value'>Text</option>"); // 在Select末尾追加一个Option

2. $("#select_id").prepend("<option value='0'>请选择</option>"); // 在Select开头插入一个Option

3. $("#select_id option:last").remove(); // 删除Select中索引最大的Option（即最后一项）

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

5. $("#select_id option[value='3']").remove(); // 删除Select中Value属性为'3'的Option

5. $("#select_id option[text='4']").remove(); // 删除Select中Text内容为'4'的Option

以上介绍了JS与jQuery动态操作Select Option的相关方法，希望能为读者提供实用参考。如有任何疑问，欢迎留言交流，小编将及时回复。感谢大家对本站的支持！