从动态创建的下拉列表中获取值

我的代码我为每个人创建了列表和隐藏字段，以便能够在后面的代码中捕获选定的值。我确实有一个问题，将隐藏值设置为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

从动态创建的下拉列表中获取值

回答

相关问题