Get value from dynamically created droplist

Question

I my code I create droplists and hidden field for each of them to be able to catch selected value in code behind. I do have a problem set hidden value to the value of selected item in droplist probably because I am not able to create correct selector.

Name of my droplist are dropTypeXXY where XX stands for two alphanumeric characters and Y stands for number for example.

dropTypeU19, dropTypeBB22, dropTypeAG71

hidden fields for them are hdnY where Y stands for number

hdn9, hdn22, hdn71

In both cases these values are IDs of given html elements.

My question is how can I assign list item value to hidden field when droplist selection is changed.

My jQuery

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

    });
});

Edit: My problem is that the selector is not working and alert is not even called. Whey I try to apply similar approach to droplist that I create in code behind it works but not for droplists created by 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);

I create them based on AJAX call. I am able to display them in console and display them to user and even give them items but I am not able to run .change() event on them.

Sorry I did not mentioned it earlier.

This doesn't work for them as well. Is there a problem with html tags that are not part of DOM from the beginning of page life?

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

            alert("hi");

        });

Edit 2 I looks like my answer lies here. It actually works and alert is raised. Thank you very much guys I'll try to implement the data-target and class trick.

score 1 · Answer 1 · answered Apr 05 '17 at 10:38

With Dynamically created controls it is easier to select them by class since you cannot use ClientID. Go give them a unique CssClass in code behind when creating the Control.

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

Now you can select them with jQuery like this

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

score 1 · Answer 2 · answered Apr 05 '17 at 10:39

You can use a class selector ("select" for example) (instead of an id) and add an attribute data-target in your html that say which hidden field is linked to this droplist.

And your js can be something like :

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

Or you can also use DOM navigation to find the hidden field without any id if you know the structure of your code and if it's always the same.

Pseudo html code :

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

levent · Answer 3 · 2017-04-05T10:55:30.103

You can do it by adding class to a name you specify.

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

Get value from dynamically created droplist

3 Answers3