3つの選択ボックスのどれが使用されているかを調べる

Question

1つのエンティティ属性に対して3つの選択フィールドが3つあります。下の図に示すように（Fiddle）。

どの選択フィールドが使用されたか（ユーザーが最後にクリックしたもの）を検出し、この選択ボックスの番号（0,1、 2）と選択された値。

このコードの目的は、フォームを保存する際に考慮する必要のある選択ボックスをサーバー側に伝えることです。 I Ajaxを介してデータを送信します（私はどのように知っている、私はそれが使用されている選択ボックスのどの把握する部分のみを必要とする）

<div class="form-group"> 
<label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label> 
<div class="col-sm-10 form-inline"> 

<select id="_D1_H1"> 
<option value="" disabled="" selected="" hidden="">label1</option> 
<option value="Value1d">Value1d</option> 
<option value="Value2">Value2</option> 
<option value="Value3">Value3</option> 
</select> 

<select id="D1_H2"> 
<option value="" disabled="" selected="" hidden="">label2</option> 
<option value="Value4">Value4</option> 
<option value="Value5">Value5</option> 
</select> 

<select id="D1_H3"> 
<option value="" disabled="" selected="" hidden="">label3</option> 
<option value="Value6">Value6</option> 
</select> 

</div> 
</div> 

Answer 1

$('.drp').change(function() { 
 
let selectedDropdown = $(this).attr('id'); 
 
let selectedValue = $(this).val(); 
 
alert(selectedDropdown); 
 
alert(selectedValue); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label> 
 
    <div class="col-sm-10 form-inline"> 
 

 
     <select class="drp" id="_D1_H1"> 
 
<option value="" disabled="" selected="" hidden="">label1</option> 
 
<option value="Value1d">Value1d</option> 
 
<option value="Value2">Value2</option> 
 
<option value="Value3">Value3</option> 
 
</select> 
 

 
     <select class="drp" id="D1_H2"> 
 
<option value="" disabled="" selected="" hidden="">label2</option> 
 
<option value="Value4">Value4</option> 
 
<option value="Value5">Value5</option> 
 
</select> 
 

 
     <select class="drp" id="D1_H3"> 
 
<option value="" disabled="" selected="" hidden="">label3</option> 
 
<option value="Value6">Value6</option> 
 
</select> 
 

 
    </div> 
 
</div>

Answer 2

あなたはval()でindex()方法と値を持つインデックスを取得することができます

$('select').change(function() { 
 
    var n = $(this).index() 
 
    var val = $(this).val(); 
 

 
    console.log(n + ' ' + val) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label> 
 
    <div class="col-sm-10 form-inline"> 
 
    <select id="_D1_H1"> 
 
     <option value="" disabled="" selected="" hidden="">label1</option> 
 
     <option value="Value1d">Value1d</option> 
 
     <option value="Value2">Value2</option> 
 
     <option value="Value3">Value3</option> 
 
    </select> 
 

 
    <select id="D1_H2"> 
 
     <option value="" disabled="" selected="" hidden="">label2</option> 
 
     <option value="Value4">Value4</option> 
 
     <option value="Value5">Value5</option> 
 
    </select> 
 

 
    <select id="D1_H3"> 
 
     <option value="" disabled="" selected="" hidden="">label3</option> 
 
     <option value="Value6">Value6</option> 
 
    </select> 
 

 
    </div> 
 
</div>

Answer 3

他の回答はうまくいくようですが、私は純粋なjsの代替案を追加しています。私はイベントリスナーを追加する際にデータ属性を使用して注文を保存しましたが、具体的な状況に応じてマークアップを作成するときにデータ属性を使用したい場合があります。

function addEventListeners() { 
 
    selects = document.getElementsByTagName('select'); 
 
    for (i = 0; i < selects.length; i++) { 
 
    selects[i].setAttribute('data-pos', i); 
 
    selects[i].addEventListener('change', alertChange); 
 
    } 
 
} 
 

 
function alertChange() { 
 
    console.log('Select number: ' + this.getAttribute('data-pos') + ' changed to value: ' + this.value + '.'); 
 
} 
 

 
addEventListeners();

<div class="form-group"> 
 
    <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label> 
 
    <div class="col-sm-10 form-inline"> 
 

 
    <select id="_D1_H1"> 
 
<option value="" disabled="" selected="" hidden="">label1</option> 
 
<option value="Value1d">Value1d</option> 
 
<option value="Value2">Value2</option> 
 
<option value="Value3">Value3</option> 
 
</select> 
 

 
    <select id="D1_H2"> 
 
<option value="" disabled="" selected="" hidden="">label2</option> 
 
<option value="Value4">Value4</option> 
 
<option value="Value5">Value5</option> 
 
</select> 
 

 
    <select id="D1_H3"> 
 
<option value="" disabled="" selected="" hidden="">label3</option> 
 
<option value="Value6">Value6</option> 
 
</select> 
 

 
    </div> 
 
</div>

Answer 4

今、私はあなたの更新を読んで、あなたはおそらく

// for some reason I could not use the sel.defaultSelected 
 
// so I save the index at load 
 
$(function() { 
 
    $("select").each(function() { 
 
    $(this).data("def", this.selectedIndex); 
 
    }); 
 

 
    $("#send").on("click", function() { 
 
    var changed = []; 
 
    $("select").each(function(i, sel) { 
 
     if (sel.selectedIndex != $(this).data("def")) changed.push([i, sel.value]) 
 
    }); 
 
    console.log(changed); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label class="col-sm-2 control-label control-label required">Contenu de l'annonce</label> 
 
    <div class="col-sm-10 form-inline"> 
 

 
    <select id="_D1_H1"> 
 
     <option value="">label1</option> 
 
     <option value="Value1d" selected>Value1d</option> 
 
     <option value="Value2">Value2</option> 
 
     <option value="Value3">Value3</option> 
 
    </select> 
 

 
    <select id="D1_H2"> 
 
     <option value="">label2</option> 
 
     <option value="Value4">Value4</option> 
 
     <option value="Value5">Value5</option> 
 
    </select> 
 

 
    <select id="D1_H3"> 
 
     <option value="">label3</option> 
 
     <option value="Value6">Value6</option> 
 
    </select> 
 

 
    </div> 
 
</div> 
 
<button id="send" type="button">Send</button>