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