使用jQuery在HTML选择中获取所选选项的文本

Question

我下面有一个html。 如何获取第二个标签的文本，即“ Frame Size” 。

<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上面使用。

编辑

如果我两次使用相同的块具有不同的选项集，那么我如何才能获得每个块的第二个选项呢？ 在这种情况下，我需要Frame Size和Photo Size，但是在每次调用时，它仅返回Frame Size 。 任何帮助，将不胜感激。

Answer 1

用这个

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

它将为您提供<option>内的文本

Answer 2

您不能像这样使用选择器：

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

因为在此结果集中，这些选项中只有一个选项的索引为1第二个.productOptionViewSelect中的第二个选项的索引.productOptionViewSelect的索引等于第一个div中最后一个选项的索引加2 。

因此，您应该迭代这两组选项并使用.text() ：

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

输出：

Frame Size
Photo Size

Answer 3

如果要获取所选选项的文本，则需要获取所选选项的jquery对象，然后使用.text()或.html()获取其中的内部内容：

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

Answer 4

尝试

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

Answer 5

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