javascript - 如何获取 HTML 下拉框的内容？

Question

我有一个下拉列表作为表单的一部分。它调用一个 JavaScript 函数作为它的动作，它的内容是几个字符串之一。

在该函数中，我需要获取用户选择的字符串。我遇到了一个函数，可以让我获取所选项目的索引号，但是由于列表的内容可能会有所不同，因此它实际上是无用的。有没有一种方法可以让我获取用户输入的实际字符串，可能是使用 DOM 和getElementById()，或者使用 JQuery？

我考虑使用文本字段，但这会带来与界面相关的错误的可能性。

Answer 1

不太确定你想要什么，但据我了解，也许就是这样：

HTML

<select>
    <option value="1">This is the first one</option>
    <option value="2">This is the second one</option>
</select>

Javascript

$('select').on('change', function() {
    alert($(this).find('option:selected').text());
})

Answer 2

编辑： 您似乎想要选项的文本，而不是值。

第二次编辑： 在 OP 中使用 Rob 的建议，所以我们不需要迭代。

HTML

​<select name="myselect" id="myselect">
  <option value="alpha">one</option>
  <option value="beta">two</option>
  <option value="gamma">three</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JS

var mySelect = document.getElementById('myselect')​​​; //get our select by its ID
mySelect.addEventListener('change', function(evt){
   return evt.target.options[evt.target.selectedIndex].text;  
});

​</p>

请注意addEventListener在 Internet Explorer 8 及更低版本上不起作用，因此您需要使用attachEvent。不过，这应该给你一个很好的主意。如需进一步参考，请参阅https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

​​</p>