使用jQuery查找所选选项的名称

我已经创建了一个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); }); }); 

如何扩展此function以便它使用’this’，允许我在同一页面上多次重复使用此function？ 我被抓住是因为你不能使用name: $(this + ' :selected').text() 。

Answer 1

这应该工作：

 $("#"+$(this).attr("id")+" :selected") 

它不漂亮，但它的诀窍:)

或者这将有效：

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

Answer 2

我认为你要找的是.filter（）

 name: $(this).filter(':selected').text() 

如果没有选中，它将返回空字符串

祝好运！

编辑 ：

我没有看到布雷特在“选择”之前有一个空间，这意味着他正在寻找一个孩子。 Stefanvds建议使用find（）会很好。 filter（）检查当前dom是否为“：selected”，而find（）将查找所有级别的子节点。 你也可以使用.children（），如果你知道你正在寻找的所选dom是“this”的直接孩子，因为它只是寻找一个级别的孩子，因为它更有效率。

 name: $(this).children(':selected').text() 

Answer 3

没有jQuery

没有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); }); 

  One Two Three  

Answer 4

你也可以使用jQuery的第二个参数（context）来避免不必要的“filter”，“查找”，“孩子”等。这样你的选择器就像这样：

 $('select[name="myselect"]').on('change',function(){ var selectedOptionName = $('option:selected',this).text(); console.log(selectedOptionName); });