変更イベントでドロップダウン配列のインデックスを取得する

Question

私は複数のドロップダウンを持っています。これらは pricing[1], pricing[2], pricing[3]というようになります。 onchangeイベントはすべてpricing[]という名前で、その場合は「x」であるpricing[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

あなたが（ "＃のdropdownexample"）.prop（ 'selectedIndexの'）

すなわち$使用することができます。私はこれを試してみました

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

Htmlの

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

Javascriptをそれはうまくいくようです。

Answer 3

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>