如何多次使用下拉列表中的选项

时间:2014-04-22 11:46:11

标签: javascript jquery html drop-down-menu

我想知道是否有一种方法可以在select标签中使用多个下拉列表中的选项。我的HTML看起来像:

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

我想将上面完全相同的值添加到这些选择标记中:

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

我试过这样的话:

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>");
    }
}

我试图获取第一个选择标记的值并添加到另一个标记中。但是,我无法获得月份的选项价值,名称或其他内容......而且

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

不起作用:(对于选择标签,例如id =&#34; zile&#34; + i(天数)和id =&#34; luniAn&#34;将为这两个下拉列表添加6次以上+ i代表第二个下拉列表(月份)。

4 个答案:

答案 0 :(得分:2)

您可以尝试html()功能

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

请检查此demo

答案 1 :(得分:2)

演示:http://jsfiddle.net/8LcVv/

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

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

答案 2 :(得分:0)

你也可以使用html定义的javascript变量:

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

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

这样的事也应该有用。

答案 3 :(得分:0)

您可以在一个文件中添加选择块;并将它们包含在需要的地方。这个链接可以帮到你。

Include same header and footer in multiple html files

使用此技术的好处是它允许您在不同的页面中添加相同的代码。