Asp.net、Javascript

Question

asp.netに1をドロップダウンしました。私はドロップダウン1の選択値に基づいて別のドロップダウン2を設定したいと思います。どのように私はこれを達成することができますか。私はdbからデータを取り込みません。ハードコードされた値があります。

これは、これは移入するダウン私の第二のドロップである

<asp:DropDownList runat="server" CssClass="form-group" ID="ddl1" AutoPostBack="true" AppendDataBoundItems="true" Width="259px" onchange="GetSelectedTextValue(this)"> 
    <asp:ListItem Selected="True" Value="All">All</asp:ListItem> 
    <asp:ListItem Value="ATTOCK">ATTOCK</asp:ListItem> 
    <asp:ListItem Value="BAHAWALNAGAR">BAHAWALNAGAR</asp:ListItem> 
    <asp:ListItem Value="BAHAWALPUR">BAHAWALPUR</asp:ListItem> 
</asp:DropDownList> 

ダウン私の最初のドロップです。

<asp:DropDownList runat="server" CssClass="form-group" ID="ddl2" Width="259px"> 
    <asp:ListItem Selected="True" Value="-1">---All---</asp:ListItem> 
</asp:DropDownList> 

javascript関数あなたはこのコードのスニペットを使用して、第2のDropDownListのオプションを変更することができます

<script type="text/javascript"> 
    function GetSelectedTextValue(ddl1) { 
     var selectedText = ddl1.options[ddl1.selectedIndex].innerHTML; 
     var selectedValue = ddl1.value; 
     alert("Selected Text: " + selectedText + " Value: " + selectedValue); 
     //code to populate ddl2. based on text of ddl1 

    } 
</script> 

Answer 1

を追加します。したがって、このドロップダウンリストのイベントを追加して、インデックスの変更中に発生させることができ、そのメソッド内で2番目のドロップダウンリストを設定することができます。最初のドロップダウンにイベントを追加する

はOnSelectedIndexChanged =あなたはAutoPostBackのをオフにした場合、JSを使用してデータを取り込むために、次に価値がある

"Index_Changed"。

Answer 2

です。 注：まず、あなたは（簡単にするために使用される）jqueryの

function GetSelectedTextValue(ddl1) { 
    var selectedText = ddl1.options[ddl1.selectedIndex].innerHTML; 
    var selectedValue = ddl1.value; 
    alert("Selected Text: " + selectedText + " Value: " + selectedValue); 
    PopulateDropDown2(selectedText); 
} 

function PopulateDropdown2(selectedValue) { 
    switch(selectedValue) { 
     case "All": 
      $("#ddl2") 
      .html('<option >--Select an Option--</option>' + 
        '<option value="0">My Option 1</option>' + 
        '<option value="1">My Option 2</option>' + 
        '<option value="2">My Option 3</option>'); 
      break; 
     case "ATTOCK": 
      $("#ddl2") 
      .html('<option >--Select an Option--</option>' + 
        '<option value="0">My Second Option 1</option>' + 
        '<option value="1">My Second Option 2</option>' + 
        '<option value="2">My Second Option 3</option>'); 
      break; 
     default: 
      $("#ddl2") 
      .html('<option >--Select an Option--</option>' + 
        '<option value="0">My Third Option 1</option>' + 
        '<option value="1">My Third Option 2</option>' + 
        '<option value="2">My Third Option 3</option>'); 
    } 
} 

を必要としますが、スイッチの句内の他のオプションの値を追加し、コードを改善することができます。

Answer 3

はあなたがDropDownListコントロールのAutoPostBack = "true" に設定onchange="GetSelectedTextValue(this)"

function GetSelectedTextValue(t) { 
     vat txt = t.options[t.selectedIndex].text; 
     var val = t.value; 
     alert("Selected Text: " + txt + " Value: " + val); 
     //code to populate ddl2. based on text of ddl1 
}