JQuery對 Select 的各種操作,所有程式碼作者親測
阿新 • • 發佈：2018-11-10
參考：
對 Select 的各種操作（JQuery）：https://blog.csdn.net/u011277123/article/details/54570948
js和Jquery對select的操作：https://blog.csdn.net/piggachen/article/details/69943250
Tip:對於無效的程式碼塊，作者認為應該是瀏覽器或者是JQuery版本的問題
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>select beta</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> </head> <body> <select id="jq_select" name="jq_select" required="true"> <option value="1">父母</option> <option value="2">夫妻</option> <option value="3">子女</option> <option value="4">朋友</option> <option value="5" selected>其他</option> <option value="6">num</option> <option value="7">jQuery</option> </select> <script> $(document).ready(function(){ alert("請開啟【審查元素（F12）】，看控制檯（console）輸出"); //在下拉框最前新增一個選項 $("#jq_select").prepend("<option value='0'>領導</option>"); console.log("在下拉框最前新增一個選項[領導]"); //在下拉框最後新增一個選項 $("#jq_select").append("<option value='8'>同事</option>"); console.log("在下拉框最前新增一個選項[同事]"); //為Select新增事件，當選擇其中一項時觸發 $("#jq_select").change(function(){ console.log("你重新選擇了select"); //獲取下拉框選中項的index屬性值 下標從0開始 var selectIndex = $("#jq_select").get(0).selectedIndex; console.log("你選擇的select的index:"+selectIndex); //獲取下拉框選中項的value屬性值 var selectValue = $("#jq_select").val(); console.log("你選擇的select的value:"+selectValue); //獲取下拉框選中項的text屬性值 var selectText = $("#jq_select").find("option:selected").text(); console.log("你選擇的select的text:"+selectText); //設定下拉框index屬性為1的選項 選中 $("#jq_select").get(0).selectedIndex = 1; console.log("設定下拉框index屬性為1的選項 選中"); //設定下拉框value屬性為4的選項 選中 $("#jq_select").val(4); console.log("設定下拉框value屬性為4的選項 選中"); //設定下拉框text屬性為[num]的選項 選中 [此方法無效] $("#jq_select option[text='num']").attr("selected",true); console.log("設定下拉框text屬性為[num]的選項 選中[此方法無效]"); //獲取下拉框最大的index屬性值 [此方法無效] var selectMaxIndex = $("#jq_select option:last").attr("index"); console.log("獲取下拉框最大的index屬性值"+selectMaxIndex+"[此方法無效]"); //移除下拉框最後一個選項 $("#jq_select option:last").remove(); console.log("移除下拉框最後一個選項"); //移除下拉框 index屬性為0的選項 [此方法無效] $("#jq_select option[index=0]").remove(); console.log("移除下拉框 index屬性為0的選項 [此方法無效]"); //清空下拉框 $("#jq_select").empty(); console.log("清空下拉框"); }); // END--為Select新增事件，當選擇其中一項時觸發 }); </script> </body> </html>