select示例:

    one    two

 

 

js操作

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

 

一,获取

// 1.获取选中项的valueconsole.log(objSelect.value);// 2.获取选中项的indexconsole.log(objSelect.selectedIndex);// 3.获取选中项的textconsole.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和textobjSelect.options[objSelect.selectedIndex] = new Option("four", "4");// 2.修改选中项的valueobjSelect.options[objSelect.selectedIndex].value = "new1";// 3.修改选中项的textobjSelect.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.获取选中项的valueconsole.log($select.val());// 2.获取选中项的indexconsole.log($select.get(0).selectedIndex);// 3.获取选中项的textconsole.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("three");// 2.在最前加入选项$select.prepend("zero");

 

四,修改

// $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();

 

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