從動態創建的下拉列表中獲取值

我的代碼我爲每個人創建了列表和隱藏字段，以便能夠在後面的代碼中捕獲選定的值。我確實有一個問題，將隱藏值設置爲droplist中所選項目的值，可能是因爲我無法創建正確的選擇器。從動態創建的下拉列表中獲取值

我droplist的名稱是dropTypeXXY其中XX，實際是兩個字母數字字符和ÿ代表例如數量。

dropTypeU19，dropTypeBB22，dropTypeAG71

他們隱藏字段hdnY其中Ÿ代表數量

hdn9，hdn22，hdn71

在這兩個值都是給定的ID ñHTML元素。

我的問題是，如何更改下拉列表選擇時將列表項值分配給隱藏字段。

我的jQuery

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

    }); 
});

編輯： 我的問題是，選擇不工作和警覺甚至沒有叫。 Whey我嘗試將類似的方法應用於在代碼中創建的droplist，但不適用於由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（）事件。

對不起，我之前沒有提及它。

這對他們不起作用。在頁面生命的開始階段，html標籤是否存在DOM不屬於DOM的問題？

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

      alert("hi"); 

     });

編輯2 我看起來像我的答案是here。它實際上工作並警告提出。非常感謝你們，我會嘗試實現數據目標和類的技巧。

來源

2017-04-05 Bendom

使用動態創建的控件，由於無法使用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);

現在你可以使用jQuery喜歡選擇他們這

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

來源

2017-04-05 10:38:37 VDWWD

您可以使用類選擇（「選擇」爲例）（而不是ID），並添加屬性的數據目標你的HTML說明哪個隱藏字段鏈接到這個下拉列表。

和你的js可以是這樣的：

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

或者你也可以使用DOM導航系統尋找隱藏字段沒有任何標識，如果你知道你的代碼的結構，如果它總是相同的。

僞的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); 
    }); 
});

來源

2017-04-05 10:39:31

您可以通過添加類到您指定的名稱做。

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

來源

2017-04-05 10:44:40 levent

從動態創建的下拉列表中獲取值

回答

相關問題