Найти имя выбранной опции, используя jQuery

Question

Я создал функцию jquery / ajax, которая обновляет #courses, посылая # fos's .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 () проверяет, является ли текущий домен ": selected", в то время как find () будет искать детей на всех уровнях.Вы также можете использовать .children () , если вы знаете, что выбранный вами дом является прямым потомком «этого», поскольку он намного эффективнее, поскольку вы ищете только один уровень детей.

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

Answer 3

без jQuery

Это довольно просто сделать без jQuery. Внутри change прослушивателя событий доступ к выбранному параметру можно получить с помощью this.options[this.selectedIndex]. Оттуда вы можете получить доступ к value / text свойствам выбранного элемента option.

Пример здесь

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