Load asp dropdown list with numbers 1 - 20

Question

I have an ASP drop down list called and I need to load numbers 1 to 20 with 1 being selected as default. How to do this with javascript? I have a sample code but the drop down is not loading. Am I missing something?

<script>
    function quantitydropdown() {
        var ddl = document.getElementById('quantitydropdownid').getElementsByTagName("select")[0];

        for (var i = 1; i <= 100; i++) {
            var theOption = new Option;
            theOption.text = i;
            theOption.value = i;
            ddl.options[i] = theOption;
        }
    }
</script>

<select id="quantitydropdownid" onchange="javascript:quantitydropdown();" runat="server" style="width: 200px;"></select>

For starters you should run your script on document load, not when the drop down changes. — Igor, Apr 18 '17 at 20:55
Possible duplicate of [How to populate the options of a select element in javascript](http://stackoverflow.com/questions/6601028/how-to-populate-the-options-of-a-select-element-in-javascript) — Igor, Apr 18 '17 at 20:56
Possible duplicate of [What is the best way to add options to a select from an array with jQuery?](http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery) — VDWWD, Apr 18 '17 at 20:57
Am guessing `document.getElementById('quantitydropdownid')` returns null - ASP.NET will generate an ID for server-side elements — tymeJV, Apr 18 '17 at 20:57
Use `var ddl = document.getElementById('<%= quantitydropdownid.ClientID %>');`. However your next question probably going to be something like `what is an Invalid postback or callback argument` — VDWWD, Apr 18 '17 at 21:00

Scott Marcus · Accepted Answer · 2017-04-19T15:54:16.350

2

So, when the document is ready, we populate the drop down:

// Set up event handler for when document is ready
window.addEventListener("DOMContentLoaded", function(){

  // Get reference to drop down
  var ddl = document.getElementById('quantitydropdownid');

  for (var i = 1; i < 21; i++) {
    var theOption = document.createElement("option");
    theOption.text = i;
    theOption.value = i;
    // If it is the first option, make it be selected
    i === 1 ? theOption.selected = "selected" :  "";
    ddl.options[i] = theOption;
  }
});

#quantitydropdownid { width:200px; }

<select id="quantitydropdownid" runat="server"></select>

edited Apr 19 '17 at 15:54

answered Apr 18 '17 at 21:00

Scott Marcus

64,069
6
49
71

I am trying this code in fiddler and the drop down is not loading – Akansha Apr 19 '17 at 15:16
@Akansha for me the dropdown works. – Timo Sep 09 '22 at 07:55

score 1 · Answer 2 · answered Apr 21 '17 at 07:38

1

Please try with this code
-----------------------------------------

JS Code
----------------

$(document).ready(function(){
   quantitydropdown();
})

function quantitydropdown()
{
  for (var i = 1; i <= 20; i++) 
  {
    $("#quantitydropdownid").append( $("<option></option>")
                                    .attr("value", i)
                                    .text(i)
                                   );
   }
}

Css Code
-----------

#quantitydropdownid { width:200px; }

HTML Code
-----------

<select id="quantitydropdownid" runat="server"></select>

answered Apr 21 '17 at 07:38

Kunal Patel

119
1
9

1

The question is not tagged with JQuery, yet your answer uses it. – Scott Marcus Apr 21 '17 at 12:32
you are right man.but I think jQuery is a wrapper of JavaScript. So we can use as per need. – Kunal Patel Apr 21 '17 at 13:24
1

Uh no. That's not the way it works. JQuery is a JavaScript library that requires you to reference and download it in order to use it. This causes additional bandwidth that a user would use to access your page. Many people/organizations can't just add a library. And, anything JQuery can do can be done with straight JavaScript. That's why we look at the tags the question was posted with. If a user wants a JQuery answer, they will tag the question that way. – Scott Marcus Apr 21 '17 at 16:49

Load asp dropdown list with numbers 1 - 20

2 Answers2

Linked

Related