selectIndex為被選中option元素的索引值，通過selectIndex可設置選中項、獲取索引值、刪除指定項和修改指定項文本。 ``` var cons=document.getElementById('myselect'); ``` ## **監聽select更改事件** ``` cons.addEventListener("change", function(e) { }) jquery監聽selet的變化 $('select').change(function(event){ var value=$(this).children('option:selected').val(); var content=$(this).children('option:selected').text(); }) ``` ## **1、獲取選中值和文本** ``` var selectElement = document.getElementById('yourSelectId'); // 通過 ID 獲取 select 元素 var selectedValue = selectElement.value; // 獲取選中的 option 的值 var selectedText = selectElement.options[selectElement.selectedIndex].text; // 獲取選中的 option 的文本 ``` ## 2、設置選中項 ``` // 設置選中項(0-第一項，-1-空選項) cons.selectedIndex = 0; ``` ## 3、selectedIndex-獲取選中的索引 ``` // 獲取索引 let getIndex = cons.selectedIndex; console.log("當前選項索引值：", getIndex); ``` ##### 4、刪除指定項 ``` // 刪除指定項 cons.remove(getIndex); //刪除最后一項 var optionLen = cons.querySelectorAll("option").length; cons.remove(optionLen - 1); //從下拉列表中刪除被選中的選項 cons.remove(cons.selectedIndex); ``` ##### 5、修改指定項文本 ``` // 修改指定項文本 cons.options[0].text = "修改指定項文本" cons.options[cons.selectedIndex].text="設置下拉列表中被選選項的文本"; ``` ## **new Option()** 創建一個新的選項 這種方式在除IE之外的瀏覽器都可以使用。由于存在BUG,IE在這種方式下不能正確設置新選項的文本 ``` var selectbox = document.getElementBy("selLocation"); var newOption = new Option("Option text","Option value"); selectbox.appendChild(newOption); ``` 替代方案1：JS動態創建選項 ``` var selectbox = document.getElementBy("selLocation"); var newOption = document.createElement("option"); newOption.appendChild(document.createTextNode("Option text"));//createTextNode()函數可返回一個文本對象 newOption.setAttribute("value","Option value"); //setAttribute()函數先創建參數一這個屬性值，然后設置它的值（參數二） ``` 替代方案2：add()方法 ``` obj.options.add(new Option("文本值","值")); ```