按照前面的回答，这是我作为一个单线图的方式。这用于获取所选选项的实际文本。已经有一些很好的例子可以获取索引编号。（对于文本，我只是想展示一下）

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

在一些罕见的情况下，您可能需要使用括号，但这非常罕见。

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

我怀疑这个过程比双线版本更快。我只是想尽可能地整合我的代码。

不幸的是，这仍然会获取两次元素，这并不理想。一个只抓取一次元素的方法会更有用，但我还没有弄清楚，关于用一行代码来实现这一点。

我认为您可以将事件侦听器附加到select标记本身，例如：

<script>
  document.addEventListener("DOMContentLoaded", (_) => {
    document.querySelector("select").addEventListener("change", (e) => {
      console.log(e.target.value);
    });
  });
</script>

在这种情况下，您应该确保所有选项都有一个value属性，并且它们不为空。

纯JavaScript：

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery：

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId").val(); // The value of the selected option

角度JS：(http://jsfiddle.net/qk5wwyct):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

对于如何实现这一点，我有一点不同的看法。我通常使用以下方法（这是一种更简单的方法，而且据我所知，它适用于所有浏览器）：

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

初学者可能希望使用NAME属性而不是ID属性访问select中的值。我们知道所有表单元素都需要名称，甚至在获得id之前。

因此，我将添加getElementsByName（）解决方案，让新开发人员也能看到。

没有。表单元素的名称需要是唯一的，以便表单在发布后可以使用，但DOM可以允许多个元素共享名称。因此，如果可以，请考虑将ID添加到表单中，或者使用表单元素名称my_nth_select_named_x和my_nth_text_input_named_y显式添加ID。

使用getElementsByName的示例：

var e = document.getElementsByName("my_select_with_name_ddlViewBy")[0];
var strUser = e.options[e.selectedIndex].value;

制作一个包含多个选项的下拉菜单（根据需要选择多个！）

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

我把它弄得有点滑稽。

下面是代码段：

<选择><option value=“RidicousObject”>香蕉鲨<option value=“SuperDuperCoding”>选择标记和选项标记！<option value=“未知”>添加更多标签以添加更多选项！</选择><h1>仅1个选项（无用）</h1><选择><option value=“Single”>单一选项</选择>

是的，片段奏效了。