I am populating my dropdown through javascript using ASP.NET, and for that I have taken the help of one of the answers on this site. I used the following code:

<script type="text/javascript">
    $(document).ready(function () {
        alert("Hi");
        var select = document.getElementById('<%=ddlItems%>');
        var option = document.createElement("option");
        option.value = "1";
        option.innerHTML = "Option1";
        select.appendChild(option);

    });
</script>

It's not working. For checking whether the program flow is entering function, I have put an alert box. It's showing me the proper alert, which means its entering the function but below that code is not working. What may be the problem?

I am populating my dropdown through javascript using ASP.NET, and for that I have taken the help of one of the answers on this site. I used the following code:

<script type="text/javascript">
    $(document).ready(function () {
        alert("Hi");
        var select = document.getElementById('<%=ddlItems%>');
        var option = document.createElement("option");
        option.value = "1";
        option.innerHTML = "Option1";
        select.appendChild(option);

    });
</script>

It's not working. For checking whether the program flow is entering function, I have put an alert box. It's showing me the proper alert, which means its entering the function but below that code is not working. What may be the problem?

• javascript
• jquery
• asp

Share Improve this question Follow edited Feb 13, 2013 at 4:05 David Robinson 78.7k1616 gold badges172172 silver badges189189 bronze badges asked Feb 13, 2013 at 3:48 FreelancerFreelancer 9,09477 gold badges4545 silver badges8181 bronze badges 15

• check the console for any errors – Hary Commented Feb 13, 2013 at 3:50
• I made a jsfiddle here: jsfiddle/BdhVv It seems to work fine for me, what does <%=ddItems%> turn into once the page is served? Make sure it's the same as the id of the element. – Tom Chandler Commented Feb 13, 2013 at 3:53
• @DON console is blank.nothing showing me on console – Freelancer Commented Feb 13, 2013 at 3:55
• Respected User, are you sure <%=ddlItems%> is the id of an element on the page? Seems like a strange id for some reason. Please post your html. – Paul Hoenecke Commented Feb 13, 2013 at 3:55
• are you getting select as an object? – Hary Commented Feb 13, 2013 at 3:56

 |  Show 10 more ments

4 Answers 4

Sorted by: Reset to default 5

Use ddlItems.ClientID

<script type="text/javascript">
    $(document).ready(function () {
        alert("Hi");
        var select = document.getElementById('<%=ddlItems.ClientID%>');
        var option = document.createElement("option");
        option.value = "1";
        option.innerHTML = "Option1";
        select.appendChild(option);

    });
</script>

Try this way. set your id mode to static for dropdownlist

<asp:DropDownList ID="ddl" runat="server" ClientIDMode="Static"></asp:DropDownList>

and change your script to

var select = document.getElementById('ddl');

Hi you can add option as follows:

$('#ddlItems').append($('<option></option>').val("1").html("option1"));

Use clientID after the dropdownlist id..

 <script type="text/javascript">
 $(document).ready(function () {
     alert("Hi");
    var select = document.getElementById('<%=ddlItems.ClientID%>');
    var option = document.createElement("option");
    option.value = "1";
    option.innerHTML = "Option1";
    select.appendChild(option);

 });
 </script>