javascript - 通过值|文本查找选择索引

我想知道是否有可能知道select的object index value。

就像是：

<select>
    <option value="12">Never</option>
    <option value="68">Gonna</option>
    ...
    <option value="2">Give</option>
    <option value="99">You</option>
    <option value="55">Up</option>
</select>

比方说，我有值68或文本Gonna，我想获取对象索引。

任何想法？

最佳答案

您可以使用jQuery的Attribute Equals Selector和.index()：

var val = "68";
var index = $('select option[value='+val+']').index();
console.log(index);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="12">Never</option>
    <option value="68">Gonna</option>
    <option value="2">Give</option>
    <option value="99">You</option>
    <option value="55">Up</option>
</select>

或：使用:contains()选择器

var text = 'Gonna';
var index = $('select option:contains('+text+')').index();
console.log(index);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option value="12">Never</option>
    <option value="68">Gonna</option>
    <option value="2">Give</option>
    <option value="99">You</option>
    <option value="55">Up</option>
</select>

更新：当元素位于带有.find()的变量中时的解决方案

var val = "68";
var itemSelect = document.getElementById('items');
var index = $(itemSelect).find('[value='+val+']').index()
console.log(index);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="items">
    <option value="12">Never</option>
    <option value="68">Gonna</option>
    <option value="2">Give</option>
    <option value="99">You</option>
    <option value="55">Up</option>
</select>