Question

我有多个下拉菜单，它们的名字如下： pricing[1], pricing[2], pricing[3]等等。名为onchange的每个下拉列表的pricing[]事件，我想获得pricing[x]的索引，即＆＃39; x＆＃39;在这种情况下，以及所选的值。

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

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

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

更改定价后，我会更新持续时间下拉列表。

Answer 1

使用find从select获取所选选项，并使用index获取该选项的索引。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因此，如果我理解正确，您需要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 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'));

我试过这个似乎有效。

获取更改事件的下拉列表索引

3 个答案: