How to use option from a drop down list many times

Question

i wonder if there's a way to use option from select tag for many drop down list. My html looks like :

<div id="backGround0"></div>
                        <div id="dropspot0"></div>
                        <p class="ziua0">LUNI<br/>
<select id="zile0">
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                        </select>
                        <select id="luniAn0">
                            <option value="Ianuarie">Ianuarie</option>
                            <option value="Februarie">Februarie</option>
                            <option value="Martie">Martie</option>
                            <option value="Aprilie">Aprilie</option>
                            <option value="Mai">Mai</option>
                            <option value="Iunie">Iunie</option>
                            <option value="Iulie">Iulie</option>
                            <option value="August">August</option>
                            <option value="Septembrie">Septembrie</option>
                            <option value="Octombrie">Octombrie</option>
                            <option value="Noiembrie">Noiembrie</option>
                            <option value="Decembrie">Decembrie</option>
                        </select>
                            </p>

And i want to add exactly the same values from above into these select tags:

                            <div id="backGround1"></div>
                        <div id="dropspot1"></div>
                        <p class="ziua1">MARTI<br/>
                            <select id="zile1">
                        </select>
                        <select id="luniAn1">
                        </select>
                            </p>

I have tried like this:

function dropDownLists(){
        var zileOptions = $.map($('#zile0 option'), function(e) { return e.value; });
        var luniAnOptions = $.map($('#luniAn option'), function(e) { return e.value; });


    for(var i = 1; i < 7; i++){
        zileToAdd = document.getElementById("zile" + i);
        luniToAdd = document.getElementById("luniAn" + i);

        zileToAdd.append("<option>" + zileOptions + "</option>");
        luniToAdd .append("<option>" + luniAnOptions + "</option>");
    }
}

Where i tried to take value of first select tag and add in another. But,i couldnt get option value,name or something else for Months...and neither

zileToAdd.append("<option>" + zileOptions + "</option>");

doesnt work :( That for shall add these two drop down lists 6 more times for select tags like id="zile" + i (for days) and id="luniAn" + i for second drop down list (months).

score 2 · Accepted Answer · answered Apr 22 '14 at 11:49

2

You can try html() function

 $('#zile1').html($('#zile0').html());
 $('#luniAn1').html($('#luniAn0').html());

Please check this demo

answered Apr 22 '14 at 11:49

Shijin TR

7,516
10
55
122

score 2 · Answer 2 · answered Apr 22 '14 at 11:53

2

demo: http://jsfiddle.net/8LcVv/

var zile0 = $('#zile0').html();
$('#zile1').html(zile0);

var luniAn0 = $('#luniAn0').html();
$('#luniAn1').html(luniAn0);

answered Apr 22 '14 at 11:53

Ashok Damani

3,896
4
30
48

score 0 · Answer 3 · answered Apr 22 '14 at 11:55

you can also use html-defining javascript-variables:

var options = '<option value="01">01</option>' + 
               '<option value="02">02</option>' + 
               '<option value="03">03</option>';

$('#zile1').append(options);
$('#luniAn1').append(options);

something like this should work also.

score 0 · Answer 4 · edited May 23 '17 at 12:05

0

you can add the select block in one file; And include them where ever needed. This link may help you.

Include same header and footer in multiple html files

The benefit of using this technique is it allows you add same code in different pages.

edited May 23 '17 at 12:05

Community

1
1

answered Apr 22 '14 at 11:55

Chandra Prakash

781
4
13
23

How to use option from a drop down list many times

4 Answers4