Javascript 使用 jQuery 查找所选选项的名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3742378/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Find name of selected option using jQuery
提问by bafromca
I've made a jquery/ajax function that updates #courses, sending #fos's .val() and .text(), specifically of the one that is selected, like so:
我制作了一个 jquery/ajax 函数来更新 #courses，发送 #fos 的 .val() 和 .text()，特别是被选中的那个，如下所示：
$('#selling #fos').change(function() {
$.post('/ajax/courses',
{
fos_id: $('#selling #fos').val(),
name: $('#selling #fos :selected').text()
},
function(data) {
$('#selling #courses').html(data);
});
});
How do I extend this function so that it uses 'this', allowing me to reuse this function multiple times on the same page? I'm caught because you can't use name: $(this + ' :selected').text().
如何扩展此函数以使其使用“this”，从而允许我在同一页面上多次重复使用此函数？我被抓住了，因为你不能使用name: $(this + ' :selected').text().
回答by Stefanvds
This should work:
这应该有效：
$("#"+$(this).attr("id")+" :selected")
it's not pretty but it does the trick :)
它不漂亮，但它确实有效:)
or this will work:
或者这会起作用：
$(this).find(":selected").text()
回答by Mouhannad
I think what you are looking for is .filter()
我想你要找的是.filter()
name: $(this).filter(':selected').text()
It will return empty string if it's not selected
如果未选中，它将返回空字符串
Good luck!
祝你好运！
Edit:
编辑：
I didn't see that Brett had a space before ":selected" which means he is looking for a child. Stefanvds suggestion to use find() will work fine. filter() checks if the current dom is ":selected" while find() is going to look for the children on all levels. You could also use .children()if you know that the selected dom you are looking for is a direct child of "this" as it is a lot more efficient since you are only looking for one level of children.
我没有看到 Brett 在 ":selected" 之前有一个空格，这意味着他正在寻找一个孩子。Stefanvds 建议使用 find() 可以正常工作。filter() 检查当前 dom 是否为 ":selected"，而 find() 将查找所有级别的孩子。如果您知道要查找的选定 dom 是“this”的直接子对象，也可以使用.children()，因为它效率更高，因为您只查找一级子对象。
name: $(this).children(':selected').text()
回答by Josh Crozier
Without jQuery
没有 jQuery
It's pretty simple to do this without jQuery. Inside of a changeevent listener, the selected option can be accessed using this.options[this.selectedIndex]. From there, you can access the value/textproperties of the selected option element.
在没有 jQuery 的情况下做到这一点非常简单。在change事件侦听器内部，可以使用this.options[this.selectedIndex]. 从那里，您可以访问所选选项元素的value/text属性。
var select = document.querySelector('#select');
select.addEventListener('change', function (e) {
var selectedOption = this.options[this.selectedIndex];
console.log(selectedOption.value);
});
var select = document.querySelector('#select');
select.addEventListener('change', function (e) {
var selectedOption = this.options[this.selectedIndex];
alert(selectedOption.value);
});<select id="select">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>回答by Robert Waddell
You can also use jQuery's second argument (context) to avoid the unnecessary "filter", "find", "children" etc. This allows your selector to be something like:
您还可以使用 jQuery 的第二个参数（上下文）来避免不必要的“过滤器”、“查找”、“子项”等。这允许您的选择器类似于：
$('select[name="myselect"]').on('change',function(){
var selectedOptionName = $('option:selected',this).text();
console.log(selectedOptionName);
});
