jquery操作select option 的程式碼小結

NO IMAGE

1、獲取選中select的value和text,html程式碼如下:
複製程式碼 程式碼如下:
<select id=”mySelect”>
<option value=”1″>one</option>
<option value=”2″>two</option>
<option value=”3″>three</option>
</select>

則可通過以下script程式碼s來獲取選中的value和text
複製程式碼 程式碼如下:
$(“#mySelect”).val(); //獲取選中記錄的value值
$(“#mySelect option:selected”).text(); //獲取選中記錄的text值

2、運用new Option(“文字”,”值”)方法新增選項option
複製程式碼 程式碼如下:
var obj = document.getElementById(“mySelect”);
obj.add(new Option(“4″,”4”));

3、刪除所有選項option
複製程式碼 程式碼如下:
var obj = document.getElementById(“mySelect”);
obj.options.length = 0;

4、刪除選中選項option
複製程式碼 程式碼如下:
var obj = document.getElementById(“mySelect”);
var index = obj.selectedIndex;
obj.options.remove(index);

5、修改選中選項option
複製程式碼 程式碼如下:
var obj = document.getElementById(“mySelect”);
var index = obj.selectedIndex;
obj.options[index] = new Option(“three”,3); //更改對應的值
obj.options[index].selected = true; //保持選中狀態

6、刪除select
複製程式碼 程式碼如下:
var obj = document.getElementById(“mySelect”);
obj.parentNode.removeChild(obj); //移除當前物件

7、select選擇的響應事件
複製程式碼 程式碼如下:
$(“#mySelect”).change(function(){
//新增所需要執行的操作程式碼
})

您可能感興趣的文章:

jQuery獲取select選中的option的value值實現方法JQuery動態新增Select的Option元素實現方法JS & JQuery 動態新增 select optionjQuery操作Select的Option上下移動及移除新增等等JQuery中對Select的option項的新增、刪除、取值刪除select中所有option選項jquery程式碼淺析jQuery對select操作小結(遍歷option,操作option)jQuery解決下拉框select設寬度時IE 6/7/8下option超出顯示不全JQuery操作Select的Options的Bug(IE8相容性檢視模式)jQuery動態產生select option下拉選單