通过值| text查找选择索引

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的属性等于选择器和 .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>

Answer 2

简单地选择属性属性属性属性，即68

或者您可以使用：包含伪选择器：对于文本，即

并获得.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

这是其他答案的香草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>

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

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'