js jquery select 操作 獲取值,選中選項,增加,修改,刪除

 

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

 

最后: 更為復雜的取賦值需要用到遍歷.