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

如何扩展此功能以使其使用'this'，允许我在同一页面上多次重复使用此功能？我被抓住是因为你无法使用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（）将查找所有级别的子节点。如果您知道所选择的dom是“this”的直接子项，您也可以使用.children()，因为它只是寻找一个级别的孩子，所以效率更高。

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

Answer 3

没有jQuery

没有jQuery这样做很简单。在change事件侦听器内部，可以使用this.options[this.selectedIndex]访问所选选项。从那里，您可以访问所选选项元素的value / text属性。

Example Here

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的第二个参数（context）来避免不必要的“过滤器”，“查找”，“孩子”等。这样你的选择器可以是：

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

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

4 个答案:

没有jQuery