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

Question

我制作了一个 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 use 'this '，允许我在同一页面上多次重用此函数吗？我被抓住了，因为你不能使用 name: $(this + ' :selected').text()。

Answer 1

这应该有效：

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

它不漂亮，但它确实有效:)

或者这会有效：

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

Answer 2

我认为您正在寻找的是 .filter()

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

如果未选择它，它将返回空字符串

好运气！

编辑：

我没有看到Brett在“:selected”之前有一个空格，这意味着他正在寻找一个孩子。 Stefanvds 建议使用 find() 会很好地工作。
filter() 检查当前 dom 是否为“:selected”，而 find() 将查找所有级别的子级。如果您知道要查找的选定 dom 是直接的，您也可以使用 .children() “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);
});

<select id="select">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>

Answer 4

您还可以使用 jQuery 的第二个参数（上下文）来避免不必要的“过滤器”、“查找”、“子项”等。这允许您的选择器类似于：

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