How do I repeat select elements in HTML


Tags: javascript,jquery,html,css

Problem :

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?



Solution :

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.


    CSS Howto..

    How do I make my links appear as images, and have them change with hover and so on?

    How combine multiple media destinations (screen, print) with width restriction?

    How to inherit from ancestor and not parent in CSS?

    CSS - How to remove whitespace between anchored images

    How to line up a css ::before pseudo element like a grid

    Can someone explain or show how to combine a bootstrap 3 collapsing top nav and and offcanvas side nav?

    How do I apply an image to background using inline CSS?

    How to change the color of an active h5 tab using jQuery or CSS

    How can I vertically center this css/javascript based modal dialog?

    How page turn effect work in turn.js

    How to pass array from method to property using PHP

    How to dynamically add .css to a custom Javafx LineChart Node?

    How to make a bullet of an image slider look different while is active?

    How to make images to go out of the div when width is over the max-width?

    How do you scroll the page content over a cover image (like medium.com)?

    Why don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)

    How to override style of single RichFaces component

    How to override a CSS class within a content div

    How to change the colors of HTML form elements displayed in UIWebView?

    CSS: How to display an image in the background of a fixed-width, centered div?

    How to convert this xpath to css?

    How to default a custom-styled dropdown to browser default style dropdown

    How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

    How to center vertically and horizontally a heading text using flask-bootstrap

    Wordpress- How do i change the default font of navigation menu?

    How to add shadow 'wings' to a centered content div

    How do I add transition to the effect of hide() and show() on these elements?

    How to change a span to look like a pre with CSS?

    How to click CSS with a space using Selenium Webdriver

    How can I make a designer's static web page run in rails 4