Question

I have a select/drop down in my HTML page which has to appear about 10 times in the page. Simple sample for that would be as below:

Qn 1: {dropdown} is a {TextField}

Qn 2: {dropdown} is a {TextField}

Qn 3: {dropdown} is a {TextField}

Where dropdown lists various options which are same and static (array of strings – no server component).

I want to create the dropdown once and use it. Can CSS have data elements for the html:select? Or how do I write javascript code to fill the select elements?

Answer 1

Here’s one way (using jQuery to make selecting and iterating through all dropdowns easier):

<p>Qn 1: <select class="repeat"></select> is a {TextField}</p>
<p>Qn 2: <select class="repeat"></select> is a {TextField}</p>
<p>Qn 3: <select class="repeat"></select> is a {TextField}​​​​​​​​​​​​​​​​​​</p>​​​​​​​​​

<script type="text/javascript">
    var optionOpen = "<option>";
    var optionClosed = "</option>"​​​​​​​​​​​​​​​​​;​​
    var selectItems = ["firstItem", "secondItem", "thirdItem"];

    $(".repeat").each(function(){
        for (key in selectItems)
        {
            $(this).append(optionOpen + selectItems[key] + optionClosed);
        }
    });
</script>

DEMO

I formatted the select options as a list and concatenated the strings to make it easy to change and reuse between pages. Simply add options to the selectItems list to add them to each <select> tag with the class repeat. Give each <select> a different name attribute if you need the form to process them separately.