如何选中html中下拉列表中的选项的文字

现在我们有一个下拉列表，Html代码如下：

[html] view plain copy

<select id="fruit_type">

<option value ="f1">Apple</option>

<option value ="f2">Banana</option>

<option value ="f3">Orange</option>

<option value ="f4">Pearl</option>

</select>

这个是时候我们想拿到选中的水果的名字，比如Apple，下面的代码不行：

[javascript] view plain copy

var fruit_select = document.getElementById("fruit_type")

var fruit_name = fruit_select.value

这个时候只能拿到水果的id，比如 f1

这时需要先得到选中的菜单项的index，再取文字

[javascript] view plain copy

var fruit_select = document.getElementById("fruit_type")

var fruit_index=fruit_type_select.selectedIndex

[javascript] view plain copy

// 这行会返回 f1

var fruit_id = fruit_type_select.options[fruit_type_index].value

[javascript] view plain copy

// 这行才能返回我们想要的 Apple

var fruit_name = fruit_type_select.options[fruit_type_index].text

①：使用Word来编辑如下图，在IE或者其他浏览器的菜单中执行 *** 作：“文件”→“用Microsoft Office Word编辑”；本方法只针对已安装WORD的计算机；如果没安装WORD，无法使用该功能！执行 *** 作以后，自动打开WORD软件，里面的文档内容即为网页中的内容，这个时候就可以轻松使用鼠标选择需要的文字了！另：如果你的计算机安装了FrontPage软件，那么，上图中的“用Microsoft Office Word编辑”会被为”→“用Microsoft Office FrontPage编辑”； *** 作方法雷同。②：这招是绝招，放之四海皆准首先保证你的计算机安装了网页制作软件，要么是如下图的网页制作软件，要么是FrontPage，两者都可实现！实现方法：在你查看资料的网页窗口中，执行IE浏览器或其他浏览器的菜单：“查看”→“源文件”，自动打开记事本软件，当前的文档里面自动填充该网页的HTML代码，里面就包含了所需要的资料！之后，在记事本窗口中按Ctrl+A进行全选，全部选中记事本里面的html代码，执行复制 *** 作！打开网页制作软件，在打开网页制作软件的同时，会新建一个页面，将网页模式切换到“代码”方式，之后全部选择里面默认出现的HTML代码并将其删除；删除了之后，将刚才在记事本中复制的代码粘贴网页制作软件的“代码”模式下，最后将模式切换到“设计”状态，这个时候，就可以看到所需要的文字材料了，需要什么就选择什么， *** 作就和 *** 作WORD一样方便！

原生js

document.getElementById('select').options[document.getElementById('select').selectedIndex].text

你也可以去5 1 r g b 看看

---