Javascript与jQuery操作<select/>

HTML中<select/>元素如下：

<select id="select">
    <option value="opt1">Option1</option>
    <option value="opt2">Option2</option>
    <option value="opt3">Option3</option>
</select>

 

1. 获取选中向项的文本与值：

var selectEle = document.getElementById("select");
var selectedOption = selectEle.options[selectEle.selectedIndex];
var selectedText = selectedOption.text;
var selectedVal = selectedOption.value;

   或者使用jQuery

var $selectedOpt = $("#select").find("option:selected");
var selectedText = $selectedOpt.text();
var selectedVal = $selectedOpt.val();

 2.选中某一项（3种方式）

//1.设置选项的selected属性选中
var selectEle = document.getElementById("select");
selectEle.options[2].selected = true;

//2.通过select元素的selectedIndex属性选中
document.getElementById("select").selectedIndex = 2;

//3.通过设置select元素的值匹配选项
document.getElementById("select").value = "opt3";

 或者使用jQuery

//1.设置选项的selected属性选中
$("#select option[value='opt3']").attr("selected", true);

//2.通过设置select元素的值匹配选项
$("#select").val("opt3");

 3.增加一个选项

var selectEle = document.getElementById("select");
var newOpt = new Option("Option4", "opt4");
selectEle.options.add(newOpt);

 或者使用jQuery

var $newOpt = $("<option value='opt4'>Option4</option>");
$("#select").append($newOpt);

 4.删除一个选项

var selectEle = document.getElementById("select");
selectEle.options.remove(selectEle.selectedIndex);

  或者使用jQuery

$("#select option:selected").remove();

 5.清空所有选项

document.getElementById("select").options.length = 0;

  或者使用jQuery

$("#select").empty();