jQuery 获取特定选项标签文本

IT技术 javascript jquery jquery-selectors html-select
2021-01-14 19:03:30

好吧,说我有这个:

<select id='list'>
    <option value='1'>Option A</option>
    <option value='2'>Option B</option>
    <option value='3'>Option C</option>
</select>

如果我想在值为“2”时获得“选项 B”,选择器会是什么样子?

请注意,这不是询问如何获取选定的文本值,而是询问其中的任何一个,无论是否选择,取决于 value 属性。我试过:

$("#list[value='2']").text();

但它不起作用。

6个回答

如果您想获得值为 2 的选项,请使用

$("#list option[value='2']").text();

如果您想获取当前选择的任何选项,请使用

$("#list option:selected").text();
我使用 $("#list option:selected").text() 和 $("#list option:selected").attr('value')
2021-03-19 19:03:30
为了获取选定的文本(即使问题没有特别要求),由于不必知道选定的值是什么,这种方法更胜一筹。
2021-03-22 19:03:30
要获取值而不是文本,您需要编写:- $("select#list").val(); 我知道这不是所问问题的实际答案,但仍然想为通过谷歌来的新手提到这一点。
2021-04-08 19:03:30

它正在寻找一个 idlist属性value等于的元素2
你想要的是 的option孩子list

$("#list option[value='2']").text()
@Derek ,val() 不会给出选项的文本,它会给出它的值,在某些情况下(我敢说很多)是不一样的。
2021-03-20 19:03:30
您应该始终使用.trim()after.text()因为某些浏览器有时可能会在用户不可见的文本前后添加一些空格,但可能会导致获取错误的值$("#list option[value='2']").text().trim()
2021-03-21 19:03:30
谢谢你的昵称。如果您想动态获取值,这里是这个答案的扩展: var selectValue = document.getElementById('list').value; var selectOption = $("#list option[value=" + selectValue + "]").text(); ///很好的例子nickf。
2021-03-31 19:03:30
@nickf ,更简单, $('#list').val()
2021-04-03 19:03:30
@Kevin,在这种情况下,您可能想使用此答案下方的答案。 $('#list option:selected').text()
2021-04-04 19:03:30

这对我来说非常有效,我正在寻找一种方法来发送两个不同的值,其中包含 MySQL 生成的选项,以下是通用和动态的:

$(this).find("option:selected").text();

正如其中一条评论所述。有了这个,我能够创建一个动态函数,该函数适用于我想要获取两个值、选项值和文本的所有选择框。

几天前,我注意到当我使用此代码将站点的 jQuery 从 1.6 更新到 1.9 时,这停止工作......可能与另一段代码发生冲突......无论如何,解决方案是从find() 调用:

$(this).find(":selected").text();

那是我的解决方案...只有在更新 jQuery 后遇到任何问题时才使用它。

虽然这个答案很有见地并帮助我解决了我遇到的问题,但它并没有正确回答这个问题:请注意,这不是在询问如何获取选定的文本值,而是询问其中的任何一个,无论是否被选中与否,取决于 value 属性。
2021-03-27 19:03:30
据说这是根据 WebStorm 8 进行的更有效的方法。
2021-03-28 19:03:30

基于 Paolo 发布的原始 HTML,我想出了以下内容。

$("#list").change(function() {
    alert($(this).find("option:selected").text()+' clicked!');
});

它已经过测试,可以在 Internet Explorer 和 Firefox 上运行。

另一种方法是: $("option:selected", this).text()
2021-03-16 19:03:30
这是一个更好的答案,因为它考虑了复杂的场景,而不仅仅是静态 html 和简单的 javascript 事件。
2021-03-19 19:03:30
$("#list option:selected").each(function() {
   alert($(this).text());
});  

对于#list元素中的多个选定值