Question

我的代码我为每个代码创建了下拉列表和隐藏字段，以便能够捕获代码中的选定值。我确实有问题设置隐藏值到droplist中选定项目的值可能是因为我无法创建正确的选择器。

我的下拉列表的名称是 dropTypeXXY ，其中 XX 代表两个字母数字字符， Y 代表数字。例如。

dropTypeU19，dropTypeBB22，dropTypeAG71

隐藏字段为 hdnY ，其中 Y 代表数字

hdn9，hdn22，hdn71

在这两种情况下，这些值都是给定html元素的ID。

我的问题是，当更改删除列表选项时，如何将列表项值分配给隐藏字段。

我的jQuery

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

    });
});

修改我的问题是选择器不工作，甚至没有调用警报。 Whey我尝试将类似的方法应用于我在其后面的代码中创建的droplist，但不适用于jQuery创建的droplists。

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

现在您可以使用jQuery这样选择它们

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

Answer 2

您可以使用类选择器（例如“select”）（而不是id）并在html中添加属性data-target，说明哪个隐藏字段链接到此下拉列表。

你的js可能是这样的：

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

或者，如果您知道代码的结构以及它是否始终相同，您也可以使用DOM导航来查找没有任何ID的隐藏字段。

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

从动态创建的droplist中获取价值

3 个答案: