使用 jQuery 在 HTML 选择中获取选定选项的文本答案

【问题标题】：Get selected option's text in an HTML select using jQuery使用 jQuery 在 HTML 选择中获取选定选项的文本
【发布时间】：2015-06-29 18:50:37
【问题描述】：

我在下面有一个 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>

我可以通过

得到select的值

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

但这不能满足我的要求。可以选择任何选项，所以我不能在 jQuery 之上使用。

编辑

如果我有两次具有不同选项集的相同块，那么我如何获得每个块的第二个选项？在这种情况下，我想要 Frame Size 和 Photo Size 但在每个事件调用它只返回 Frame Size . 任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery select selectedtext

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用这个

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

它会给你<option>里面的文字

【讨论】：

【解决方案3】：

试试

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

【讨论】：

【解决方案4】：

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

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

因为在这个结果集中只有一个选项将具有索引1 - 第二个.productOptionViewSelect div 中的第二个选项的索引将获得等于第一个 div 中最后一个选项的索引加上@987654324 的索引@。

因此，你应该遍历这两组选项并使用.text()：

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

输出：

Frame Size
Photo Size

【讨论】：

我总是想要第二个选项。所以选项：无法使用选定的选项。
好的，我明白了，我编辑了回来，但我不知道为您的另一组选择什么选择器 - 只需更改类名或任何与之匹配的名称。
我编辑了我的问题，让您更清楚。在可能的情况下，我无法更改我的类或结构。上面是代码。我可以使用 each() 或类似的东西来获取两个数据
好的，但是你应该改变你的问题标题 - 现在它是“选择的”，我会选择“获取具有相同索引的选项文本，但在两个具有相同类名的单独 div 中”或类似的东西。

【解决方案5】：

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

【讨论】：