在更改事件上获取下拉数组的索引

Question

我有多个下拉菜单，它们的名称如下： pricing[1], pricing[2], pricing[3] 等等。 onchange 每个名为 pricing[] 的下拉列表的事件，我想获取 pricing[x] 的索引，在这种情况下为“x”，以及选定的值。

HTML：

foreach($allindichapter as $chapter){
    echo "<select name='pricing[".$chapter['CHAPTER']."]' id='pricing[".$chapter['CHAPTER']."]' class='pricing' style='width:100%'>";

foreach($indimonthly as $imchapter => $type){
        foreach($type as $typ => $price){
            if($imchapter == $chapter['CHAPTER'])
                echo '<option value="'.$chapter.'">Monthly - '.$price.'Php</option>';
            break;
        }
    }
echo "</select>";
}

问题是，我什至无法为下拉菜单输入onchange 函数。我尝试了不同的方法，例如：

$('select').change(function(){
            console.log($('option:selected',this).index()); 
        });

$(function(){
        $('select').change(function(){
            console.log($('option:selected',this).index()); 
        });

$('.pricing').bind("change",function(){
        var id = $(this).attr('id');
        alert(id);
            });`

我还使用了带有 JQuery 函数的 onchange="pricechange()"。 任何帮助将不胜感激。

作为参考，这是我想要实现的目标：

当定价发生变化时，我会更新持续时间下拉菜单。

Answer 1

因此，如果我理解正确，您需要select 的索引，而不是所选option 的索引。

在这种情况下，您必须查看 $(this).attr('name') 并从该字符串中提取索引。

或者，您可以将data 属性添加到仅具有索引的选择中，这比从名称中提取它更容易检索。

我举了一个例子来说明如何做到这两点。

还要确保如果选择是通过 Ajax 包含的，则不能使用 .bind 或 .change 而是使用 .on。

$('select').change(function(){
  alert(
    'Select name index: ' + $(this).attr('name').replace(/pricing\[(\d+)\]/, '$1') + 
    '\nSelect data index: ' + $(this).data('index') + 
    '\nValue: ' + $(this).val()
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="pricing[1]" data-index="1">
  <option value=""></option>
  <option value="1-1">1-1</option>
  <option value="1-2">1-2</option>
</select>
<select name="pricing[2]" data-index="2">
  <option value=""></option>
  <option value="2-1">2-1</option>
  <option value="2-2">2-2</option>
</select>
<select name="pricing[3]" data-index="3">
  <option value=""></option>
  <option value="3-1">3-1</option>
  <option value="3-2">3-2</option>
</select>

Answer 2

使用find从select获取选中的选项，使用index获取选项的索引。

 console.log($(this).find('option:selected').index())

$('select').change(function() {
  console.log(
    'Name: ',this.name,
    'Value: ',this.value,
    'Index: ',$(this).find('option:selected').index()
  )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="pricing[1]">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select name="pricing[2]">
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select name="pricing[3]">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Answer 3

您可以使用 $("#dropdownexample").prop('selectedIndex')

即： html

<select id="dropdownexample">
    <option value="yes">Yes</option>
    <option value="no" selected="selected">No</option>
</select>

Javascript

alert($("#dropdownexample").prop('selectedIndex'));

我已经尝试过了，它似乎有效。