JavaScript / jQuery - 通过文本从选择菜单中获取选项属性[重复]答案

【问题标题】：JavaScript/jQuery - Get option attribute from select menu by text [duplicate]JavaScript / jQuery - 通过文本从选择菜单中获取选项属性[重复]
【发布时间】：2015-05-20 10:29:36
【问题描述】：

这是我的 HTML：

<select name="Pcolor" id="image" style="height:30px;">
    <option value="">Избран цвят: Blue/Lt Blue </option>
    <option value="45751303" color-number="0">Black</option>
    <option value="45751343" color-number="1">Black/Pink</option>
    <option value="45751359" color-number="2">Blue/Lt Blue</option>
    <option value="45751324" color-number="3">Dk Purple/Purpl</option>
    <option value="45751390" color-number="4">Ink/Cerise</option>
</select>

这是我的 Javascript：

var ColorSelectt = $('#image').find('option[text="Black/Pink"]').attr("color-number");
alert(ColorSelectt);

我要做的就是从 ID 为 image 的选择菜单中找到具有文本（非值）Black/Pink 的选项，然后获取 color-number="" 中包含的值。

当警报出现时，它会给我回复undefined，这是为什么呢？

我该如何解决？

【问题讨论】：

您是否有多个选择具有相同 id 的机会？
不，只有一个ID为image的选择菜单
在选择器中使用“包含”。

标签： javascript jquery html

【解决方案1】：

使用:contains content filter 选择包含指定文本的所有元素。

var ColorSelectt = $('#image option:contains("Grey M/Navy")').attr("color-number");
var ColorSelectt2 = $('#image option:contains("Navy/Grey M")').attr("color-number");

alert(ColorSelectt + ':' + ColorSelectt2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Pcolor" id="image" style="height:30px;">
    <option value="">Избран цвят: Blue/Lt Blue </option>
    <option value="45751303" color-number="0">Black</option>
    <option value="45751343" color-number="1">Black/Pink</option>
    <option value="45751359" color-number="2">Blue/Lt Blue</option>
    <option value="45751324" color-number="3">Dk Purple/Purpl</option>
    <option value="45751390" color-number="4">Ink/Cerise</option>
    <option value="45751390" color-number="5">Grey M/Navy</option>
    <option value="45751390" color-number="6">Navy/Grey M</option>
    
</select>

【讨论】：

当有类似情况时，此代码不起作用：如果有一个带有文本 Grey M/Navy 的选项，然后是另一个带有文本 Navy/Grey M 的选项。如果我以最后一个为目标，我会从color-number 获得号码，但如果我尝试获得第一个，我会获得undefined。你能帮我解决这个问题吗？
我用你的情况更新了答案。它按预期工作。如果您需要完全匹配，请查看此问题和答案stackoverflow.com/questions/6673777/…
你能检查一下吗：stackoverflow.com/questions/30350022/… 有一些很奇怪的东西。请用那里的代码测试它。预先感谢。如果重要，我使用<script src="//code.jquery.com/jquery-1.10.2.js"></script> 有什么不同吗？
有没有这样我可以在搜索时跳过第一次出现？
$($('#image option:contains(text)')[1]).attr()。 jQuery 返回元素的集合，您可以将其用作数组。

【解决方案2】：

试一试：

    var ColorSelectt = $('#image').find('option:contains("Black/Pink")').attr("color-number");
    alert(ColorSelectt);

jsfiddle：https://jsfiddle.net/cw6knsc5/

或：

 var ColorSelectt = $('#image option:contains("Black/Pink")').attr("color-number");
    alert(ColorSelectt);

【讨论】：

仍然得到undefined
jsfiddle.net/cw6knsc5