Question

我的页面上有不同的select（它们没有课程，没有ID）。

它们位于页面的不同div和页面的不同部分中（它们不在同一父级下）。

（这些是日历中的事件，每个事件使用select s都有不同的选项）。

我需要知道每次有人单击时如何获取被点击的select的索引（或编号）。

到目前为止，我有：

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

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

但它总是返回1 ..

Answer 1

使用jQuery

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

您必须指定$("select")的{{1}}部分的原因是因为我们希望在页面上所有$("select").index(this)元素的上下文中使用索引。< / p>

没有jQuery

您可以结合使用spread syntax和<select>

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

Answer 2

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

这将适用于文档中的所有选择。

获取点击选择元素的索引

2 个答案:

使用jQuery

没有jQuery