CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
user3459377
user3459377

Reputation: 241

How to use option from a drop down list many times

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).

Upvotes: 1

Views: 118

Answers (4)

Chandra Prakash
Chandra Prakash

Reputation: 791

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.

Upvotes: 0

Homungus
Homungus

Reputation: 1114

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.

Upvotes: 0

AKD
AKD

Reputation: 3966

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

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

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

Upvotes: 2

Shijin TR
Shijin TR

Reputation: 7768

You can try html() function

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

Please check this demo

Upvotes: 2

Related Questions