Question

我想知道是否有可能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，我想获取对象索引。

有什么主意吗？

Answer 1

您可以使用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>

OR：：使用: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>

Answer 2

通过attribute选择元素作为值属性，即68

或者您可以使用:contains伪选择器：输入文本，即要

并通过.index()函数获取其索引。

这里是一个例子。

let value = "68", text = "Gonna";
console.log($(`select>option[value='${value}']`).index());
console.log($(`select>option:contains('${text}')`).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>

Answer 3

alert([].slice.call(document.querySelectorAll("option"), 0)
  .findIndex(function(element) {
    return element.value == 69
  })
);

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

提醒“ 2”

Answer 4

没有JQuery，您可以将ID赋予select标记，

<select id="select-list">
    <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>

您可以使用此Javascript代码

  function getIndex(value) {
    var selectList = document.getElementById('select-list');
    var optArray = selectList.children;
    var i = 0;
    while (i < optArray.length) {
      var opt = optArray[i];
      if (opt.value == value) return i;
      i++;
    }
    return null; // If value isn't exist
  }

Answer 5

这是其他答案的普通js版本。

var d = document.querySelector('select option[value="68"]').index;
console.log(d);

<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>

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

5 个答案: