0

I have a page with different selects (they have no class, no id).

They are in different divs and different sections of the page (they are not under the same parent).

(These are events on a calendar, each one has different options using selects).

I need to know how to get the index (or number) of the clicked select each time someone clicks on one.

so far I have: 

var nodes = document.getElementsByTagName('select');

var me = nodes.indexOf( $(this) );

but it always returns 1..

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Antonio
  • 535
  • 10
  • 26
  • Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) – Jason Cust Sep 11 '18 at 15:23
  • @JasonCust OP wants to get the index of the focused ` – Tyler Roper Sep 11 '18 at 15:24
  • do you need the index of the `select` element in the page or just the index of the selected `option` ? – ThS Sep 11 '18 at 15:25
  • Use `this` not `$(this)`, since `nodes` is a `NodeList`, and `this` is a `Node` (well, `Element`, which descends from `Node`). `$(this)` is a jQuery object; I'm surprised it returns 1 and not -1. – Heretic Monkey Sep 11 '18 at 15:25
  • I need to know the index of the clicked/changed – Antonio Sep 11 '18 at 15:26
  • There is no "indexOf" method on HTMLCollection object (the result of getElementsByTagName). This should throw an error. Your question is missing some context. What are you trying to do ? – Ricovitch Sep 11 '18 at 15:27
  • @TylerRoper: thanks, the `$( "select" ).index( this );` seems to work and gets the current index – Antonio Sep 11 '18 at 15:29

2 Answers2

2

With jQuery

You can use jQuery's .index() to return you the currently clicked select index:

$("select").click(function() {
  var index = $("select").index(this);
  console.log(index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option>One</option>
</select>
<select>
  <option>Two</option>
</select>

The reason you must specify the $("select") portion of $("select").index(this) is because we want the index within the context of all <select> elements on the page.

Without jQuery

You can combine spread syntax and indexOf

var nodes = document.getElementsByTagName('select');

document.addEventListener("click", function(e) {
  if (!e.target.matches("select")) return;

  var index = [...nodes].indexOf(e.target);
  console.log(index);
}, false);
<select><option>One</option></select>
<select><option>Two</option></select>
Tyler Roper
  • 21,445
  • 6
  • 33
  • 56
0
     <select>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
    </select>
    <select>
        <option value="a">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
    </select>

<script type="text/javascript">    
        var selects = document.getElementsByTagName('select');
        var selectList = Array.prototype.slice.call(selects); //convert nodes to array
        console.log(selectList);
        selectList.forEach(function (el) {
            el.addEventListener('change',function () { //add event on value change
                console.log(el.value);
            })
        })
</script>

this will work for all selects in the document.

colomuller91
  • 1