動的に作成されたドロップリストから値を取得

Question

私のコード私は、コードリストの中で選択された値をキャッチするために、それぞれのためのドロップリストと非表示フィールドを作成します。おそらく、私は正しいセレクタを作成できないため、ドロップ・リスト内の選択された項目の値に隠れた値を設定する問題があります。私のドロップリストの

名前は2つの文字の英数字を表します XXとYは、例えば番号を表しdropTypeXXYです。彼らのために

dropTypeU19、dropTypeBB22、dropTypeAG71

隠しフィールドは、Yがで数

hdn9、hdn22、hdn71

の略hdnYですどちらの場合も、これらの値はgiveのIDですn HTML要素。

私の質問は、ドロップリストの選択が変更されたときに、隠しフィールドにリストアイテムの値を割り当てる方法です。

私のjQueryの

$(document).ready(function(){ 
    $("select[id^='dropType']").on("change",function() { 
     alert("HI"); //Just to test the selector itself. 

    }); 
}); 

編集： 私の問題は、セレクタが動作していないとの警告も呼ばれていないことです。ホエイ私はそれが背後にあるコードで作成したドロップリストに同様のアプローチを適用しようとしますが、jQueryによって作成されたドロップリストには適用されません。

var list = $("<select id = dropType" + response.d[i].TypeId+ i + "/>"); 
var valueField = $("<input type='hidden' id = 'hdn" + i + "' name ='hdn" + i + "' value=-1 />"); 
         ... 

$("#<%=grdUsers.ClientID%>").after(list, valueField); 

私はそれらをAJAX呼び出しに基づいて作成します。私はそれらをコンソールに表示し、それらをユーザーに表示し、アイテムを与えることさえできますが、私は.change（）イベントを実行できません。

申し訳ありません申し訳ありません。

これは同様に機能しません。ページライフの始めからDOMの一部ではないHTMLタグに問題はありますか？

$("select").on("change", function() { 

      alert("hi"); 

     }); 

編集2 私の答えはhereをあるように私には見えます。それは実際に動作し、警告が発生します。私はデータターゲットとクラスのトリックを実装しようとします。

Answer 1

動的に作成されたコントロールでは、ClientIDを使用できないため、クラスによって選択する方が簡単です。コントロールを作成する際には、コード内に一意のCssClassを付けてください。

DropDownList ddl = new DropDownList(); 
ddl.Items.Insert(0, new ListItem("Value A", "0", true)); 
ddl.Items.Insert(1, new ListItem("Value B", "1", true)); 
ddl.CssClass = "DynamicDropDown"; 

Panel1.Controls.Add(ddl); 

今、あなたはあなたが（代わりにIDの）クラスセレクタを（例えば「選択」）を使用すると、属性データ・ターゲットを追加することができ、この

$(document).ready(function() { 
    $(".DynamicDropDown").on("change", function() { 
     alert("HI"); 
    }); 
}) 

Answer 2

のようにjQueryを使ってそれらを選択することができます隠しフィールドがこのドロップリストにリンクされていると言うhtml。

$(document).ready(function(){ 
    $("select.select").on("change",function() { 
    var $target = $($(this).attr("data-target")); 
    $target.val($(this).val()); 
    }); 
}); 

それとも、あなたのコードの構造を知っていれば、それは常に同じだ場合は、また、任意のidせずに隠しフィールドを見つけるために、DOMのナビゲーションを使用することができます。

そして、あなたのjsがのようなものにすることができます。

は擬似htmlコード：

<div> 
    <select>...</select> 
    <input type="hidden"> 
</div> 

のjQuery：

$(document).ready(function(){ 
    $("select").on("change",function() { 
    var val = $(this).val(); 
    $(this).parent().find("input").val(val); 
    }); 
}); 

Answer 3

あなたが指定した名前にクラスを追加することによってそれを行うことができます。

<select id="dropTypeU19" class="cls-name"> 
    <option value="a">a</option> 
    <option value="a1">a</option> 
</select> 
<select id="dropTypeBB22" class="cls-name"> 
    <option value="b">a</option> 
    <option value="b1">a</option> 
</select> 
<select id="dropTypeAG71" class="cls-name"> 
    <option value="c">a</option> 
    <option value="c1">a</option> 
</select> 
<input type="hidden" id="hdn19" /> 
<input type="hidden" id="hdn22" /> 
<input type="hidden" id="hdn71" /> 
<script> 
    $(function() { 
     $("select.cls-name").change(function() { 
      var selectId = $(this).attr("id"); 
      var selectValue = $(this).val(); 
      var hiddenId = "#hdn" + selectId.slice(-2); 
      $(hiddenId).val(selectValue); 
      alert($(hiddenId).val()); 

     }); 
    }); 

</script> 

OR：

 $("select[id^='dropType']").change(function() { 
      var selectId = $(this).attr("id"); 
      var selectValue = $(this).val(); 
      var hiddenId = "#hdn" + selectId.slice(-2); 
      $(hiddenId).val(selectValue); 
      alert($(hiddenId).val()); 
     });