运行示例：

var e=document.getElementById（“ddlViewBy”）；var val1=e.options[e.selectedIndex].value；var txt=e.options[e.selectedIndex].text；document.write（“<br/>所选选项值：”+val1）；document.write（“<br/>所选选项文本：”+txt）；<select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”>test2</option><option value=“3”selected=“selected”>test3</option></选择>

注意：下拉列表更改时，值不会更改，如果您需要该功能，则需要执行onClick更改。

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

<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”>单一选项</选择>

是的，片段奏效了。

2015年，在Firefox中，以下功能同样有效。

e.options.selected索引

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

<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>

使用jQuery：

$('select').val();

给定如下所示的select元素：

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

运行此代码：

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

结果如下：

value == 2
text == "test2"

交互示例：

var e=document.getElementById（“ddlViewBy”）；函数onChange（）{var值=e.value；var text=e.options[e.selectedIndex].text；console.log（值，文本）；}e.onchange=onchange；onChange（）；<表单><select id=“ddlViewBy”><option value=“1”>test1</option><option value=“2”selected=“selected”>test2</option><option value=“3”>test3</option></选择></form>