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("文本值","值")); ```