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();
最后: 更为复杂的取赋值需要用到遍历.