Получить текст выбранной опции в HTML-выделении с помощью jQuery

Question

У меня есть HTML ниже. Как я могу получить текст второго тега, т.е. "Размер кадра".

<div class="productOptionViewSelect">
    <div class="selector fixedWidth" id="uniform-08876c63593c0928fefc45101870c7b0"><span style="-webkit-user-select: none;">Frame Size</span><select class="validation" id="08876c63593c0928fefc45101870c7b0" name="attribute[1318]">
        <option value="">-- Please Select --</option>

                    <option value="2527">Frame Size</option>
                    <option value="206">10x15 (4x6 in)</option>
            </select></div>
</div>


<div class="productOptionViewSelect">
        <div class="selector fixedWidth" id="uniform-08876c63593c0928fefc45101870c7b0"><span style="-webkit-user-select: none;">Frame Size</span><select class="validation" id="08876c63593c0928fefc45101870c7b0" name="attribute[1318]">
            <option value="">-- Please Select --</option>

                        <option value="252">Photo Size</option>
                        <option value="206">10x20 (4x6 in)</option>
                </select></div>
    </div>

Я могу получить значение выбора по

$('.productOptionViewSelect').find('select').val();

Но это не выполнит мое требование. Любая опция может быть выбрана, поэтому я не могу использовать выше JQuery.

редактировать

Если у меня есть один и тот же блок дважды с разными наборами параметров, то как я могу получить второй вариант каждого блока? В этом случае я хочу Размер кадра и Размер фото, но при каждом вызове события он возвращает только Размер кадра. Любая помощь будет оценена.

Answer 1

Вы не можете использовать селектор, как это:

$('.productOptionViewSelect option:eq(1)')

потому что в этом наборе результатов только один из этих параметров будет иметь индекс 1 - индекс второго варианта во втором .productOptionViewSelect div получит индекс, равный индексу последней опции в первом плюсе div 2,

Поэтому вам следует перебрать эти 2 набора параметров и использовать .text():

$('.productOptionViewSelect').each(function(){
    console.log($(this).find('option:eq(1)').text());
});

Выход:

Frame Size
Photo Size

Answer 2

Использовать этот

$('.productOptionViewSelect').find('select option:selected').text()

Это даст вам текст внутри <option>

Answer 3

$("select.validation option:eq(1)").text();

Answer 4

Пытаться

$('.productOptionViewSelect select').find('option:selected').text();

Answer 5

Если вы хотите получить текст выбранной опции, вам нужно получить объект jquery выбранной опции, а затем использовать .text() или же .html() чтобы получить внутреннее содержание в нем:

$('.productOptionViewSelect option:selected').text();