Найти имя выбранной опции с помощью 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);
    });
});

Как расширить эту функцию, чтобы она использовала 'this', позволяя мне повторно использовать эту функцию несколько раз на одной странице? Я пойман, потому что вы не можете использовать name: $(this + ' :selected').text().

Ответ 1

Это должно работать:

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

это не очень, но это трюк:)

или это будет работать:

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

Ответ 2

Я думаю, что вы ищете . filter()

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

Он вернет пустую строку, если она не выбрана

Удачи!

Edit

Я не видел, чтобы у Бретта было место перед ": выбрано", что означает, что он ищет ребенка. Предложение Stefanvds использовать find() будет работать нормально. filter() проверяет, является ли текущий dom "выбранным", а find() будет искать детей на всех уровнях. Вы также можете использовать . Children(), если знаете, что выбранный dom, который вы ищете, является прямым дочерним элементом "this", поскольку это намного эффективнее, поскольку вы ищете только одного уровня детей.

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

Ответ 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>

Ответ 4

Вы также можете использовать второй аргумент jQuery (контекст), чтобы избежать ненужных "фильтров", "найти", "детей" и т.д. Это позволяет вашему селектору быть чем-то вроде:

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