Question

我有这个代码，圣经的书籍都在元素中：

<option value="1">Genesis</option>
<option value="2">Exodus</option>
<option value="3">Leviticus</option>
<option value="4">Numbers</option>
<option value="5">Deuteronomy</option>
<option value="6">Joshua</option>
<option value="7">Judges</option>

为了进一步解释，我有作为书籍ID的价值，所以当我从我的数据库中取出所有经文时，我可以通过书号来引用它们。

但是这样做，我无法让用户看到像“Genesis”这样的友好名称，所以我可以像这样格式化它。

如何从JavaScript获取此（当前选择的那个，即“Genesis”而不是'1'）？

Answer 1

将getElementById的结果保存到sel之类的变量中，然后执行以下操作：

var text = sel.options[sel.selectedIndex].text;

Select元素具有.options属性，为您提供所有嵌套选项元素的类似数组的集合。它们还具有.selectedIndex属性，该属性返回当前所选元素的索引。

使用其中两个，您可以获得当前选择的选项。然后，只需使用.text即可获取所选option的文字内容。

如果您不需要支持IE6 / 7，则可以使用document.querySelector()缩短内容。

var text = document.querySelector("#the_select_id option:selected").text;

querySelector()方法返回单个元素，如果没有找到则null。还有一个querySelectorAll()方法将返回一个元素集合，对于选择器应匹配多个元素时非常有用。

Answer 2

如果你的父元素有name =“books”作为属性，并且是一个select元素，那么你可以使用jQuery来做到这一点：

var bookName = $('select[name="books"] option:selected').text();

如果你的父元素有一个id =“books”作为属性，并且是一个select元素，那么你可以使用普通的JavaScript（可以改进）：

var books = document.getElementById('books');
var bookName = books.options[books.selectedIndex].text;

如何让最终用户看到<option> </option>的文本

2 个答案: