登录 / 注册
js jquery select 操作 获取值,选中选项,增加,修改,删除
发布时间:2019-02-23 15:47:40 查看:3184

select示例:

<select id="sel"> <option value="1">one</option> <option value="2">two</option> </select>

 

 

js操作

var objSelect = document.getElementById("sel");

 

一,获取

复制代码
// 1.获取选中项的value console.log(objSelect.value); // 2.获取选中项的index console.log(objSelect.selectedIndex); // 3.获取选中项的text console.log(objSelect.options[objSelect.selectedIndex].text); // 4.获取选项数量 console.log(objSelect.options.length);
复制代码

 

二,选中

// 1.选中某个value的选项 objSelect.value = 2; // 2.选中某个index的选项 objSelect.options[1].selected = true;

 

三,增加

// 1.在最后加入选项objSelect.options.add(new Option("three", "3"));

 

 四,修改

复制代码
// 四,修改 // objSelect.options[i] 获取index为i的元素选项 // 1.修改选中项的value和text objSelect.options[objSelect.selectedIndex] = new Option("four", "4"); // 2.修改选中项的value objSelect.options[objSelect.selectedIndex].value = "new1"; // 3.修改选中项的text objSelect.options[objSelect.selectedIndex].text = "new-one";
复制代码

 

五,删除

复制代码
// 两种删除方式 //objSelect.options[i] = null; // i为index //objSelect.options.remove(i); // 1.删除选中项 objSelect.options.remove(objSelect.selectedIndex); // 2.删除所有项 objSelect.options.length = 0;
复制代码

 

 

jquery操作

var $select = $("#sel");

 

一,获取

复制代码
// 1.获取选中项的value console.log($select.val()); // 2.获取选中项的index console.log($select.get(0).selectedIndex); // 3.获取选中项的text console.log($select.find("option:selected").text()); // 不推荐 // 4.获取选项数量 console.log($select.find("option").length); // 5.获取选项最大的index属性值 console.log($select.find("option:last").get(0).index); //不推荐
复制代码

 

二,选中

复制代码
// 1.选中某个value的选项 $select.val(2); // 2.选中某个index的选项 $select.get(0).selectedIndex = 1; // 3.选中某个text的选项 $select.find("option:contains('two')").attr("selected", true); // .attr("selected", "selected")也可以 //$select.find("option[text='two']").attr("selected", "selected"); //× 这种写法是错误的
复制代码

 

三,增加

// 1.在最后加入选项 $select.append("<option value='3'>three</option>"); // 2.在最前加入选项 $select.prepend("<option value='0'>zero</option>");

 

四,修改

// $select.find("option").get(i) // 获取index为i的元素选项 // 1.修改选中项的value $select.find("option").get(0).value =  "new1"; // 2.修改选中项的text $select.find("option").get(0).text =  "new-one";

 

五,删除

复制代码
//$select.find("option").get(i).remove() // i为index // 1.删除选中项 $select.find("option").get(0).remove(); // index为0是选中项 objSelect.options.remove(objSelect.selectedIndex); // 2.删除所有项 $select.find("option").remove(); // 3.删除第一项,最后一项 $select.find("option:first").remove();
$select.find("option:last").remove(); // 4.删除某value的项 $select.find("option[value=1]").remove();
复制代码

 

最后: 更为复杂的取赋值需要用到遍历.

宁夏银川舜新艺软件开发
ShunXinyi Soft develop
主要经营
软件开发,网站制作,网页设计,移动应用(安卓、苹果),微信,微网站,
FLASH动画,电子商务,计算机软硬件及网络设备等。
电话:18695132945 QQ:23923027
舜新艺软件开发 宁ICP备16001093号-1 宁公网安备 64010602000809号