CODEWITHSUNDEEP
javascriptjqueryhtml
Oiproks
Oiproks

Reputation: 794

Find select index by value|text

I was wondering if it would be possible to get a select object index knowing its value.

Something like:

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

I have, let's say, value 68, or text Gonna, and I would like to get the object index.

Any idea?

Upvotes: 0

Views: 1821

Answers (5)

LimGeomJe
LimGeomJe

Reputation: 215

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>

alert '2'

Upvotes: 0

Mamun
Mamun

Reputation: 68933

You can use jQuery's Attribute Equals Selector and .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: With :contains() Selector

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>

Update: Solution when the element is in the variable with .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>

Upvotes: 2

Kiran Shahi
Kiran Shahi

Reputation: 7980

Simply select element by attribute for value attribute i.e 68

or you can use :contains pseudo-selector: for text i.e Gonna

and get its index by .index() function.

Here is an example.

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>

Upvotes: 2

Gaslan
Gaslan

Reputation: 808

This is the vanilla js version of other answers.

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>

Upvotes: 1

Murat Acarsoy
Murat Acarsoy

Reputation: 304

Without JQuery you can give id to select tag,

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

And you can use this Javascript code,

  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
  }

Upvotes: 0

Related Questions