在下拉选择菜单中获取所选选项的值

Question

如果我有此html代码段，并希望将所选值存储为js文件中的变量，是否可以？

 <select>
       <option value="a">Not good</option>
       <option value="b">Alright</option>
       <option value="c" selected>Pretty good</option>
       <option value="d">Excellent!</option>
    </select>

我正试图尽可能避免使用jQuery。

Answer 1

您只需执行以下操作：

var selectVal = document.getElementsByTagName("select")[0].value;

然后selectVal是value中所选<option>的{​​{1}}。

Answer 2

var select_element = document.getElementById('select');

select_element.onchange = function() {
    var elem = (typeof this.selectedIndex === "undefined" ? window.event.srcElement : this);
    var value = elem.value || elem.options[elem.selectedIndex].value;
    alert(value);
}

<select id="select">
   <option value="a">Not good</option>
   <option value="b">Alright</option>
   <option value="c" selected>Pretty good</option>
   <option value="d">Excellent!</option>
</select>
<div id="value"></div>

Answer 3

要获取当前所选选项的价值，可以使用：

var menu = document.getElementById("select_menu_id");

var selected_option = menu.options[menu.selectedIndex].value;

要获取当前所选选项的文本，可以使用：

var selected_option = menu.options[menu.selectedIndex].text;