javascript - jquery 正在删除我的 html 选择

Question

考虑以下内容，我正在尝试根据用户所做的选择更改 select 显示的选项，最基本的是，执行类似操作的代码如下所示:

HTML

<select id="ddlExpedientes" class="drop-down">
    <option value="imagen1.txt">1</option>
    <option value="imagen2.txt">2</option>
</select>

<select id="ddlExpedientesPension" class="drop-down">
    <option value="imagen1.txt">1</option>
    <option value="imagen2.txt">2</option>
</select>

<select id="ddlExpedientesHistoria" class="drop-down">
    <option value="imagenb1.txt">b1</option>
    <option value="imagenb2.txt">b2</option>
</select>

<select id="ddlExpedientesSalario" class="drop-down">
    <option value="imagenc1.txt">c1</option>
    <option value="imagenc2.txt">c2</option>
</select>

<a id="pension">pension</a>
<a id="historia">pension</a>
<a id="salario">pension</a>

JS

$("a").click(function(){
    var that  = $(this);
    var drop = $('#ddlExpedientes');

    if(that.attr("id") =="pension")
    {
        var options = $("#ddlExpedientesPension option");
        drop.empty().append(options);

        //drop.append(options);

    }

    if(that.attr("id") =="historia")
    {
        var options = $("#ddlExpedientesHistoria option");
        drop.empty().append(options);

        //drop.append(options);
    }

    if(that.attr("id") =="salario")
    {
        var options = $("#ddlExpedientesSalario option");
        drop.empty().append(options);

        //drop.append(options);
    }
});

如您所见，我有 3 个选择，每个代表信息的一个“来源”，但是，无论我做什么，我想要显示的选择的“来源”在每次“插入”后都会被删除到主选择，使得不可能多次选择一个源。

我只是不知道该怎么办，或者为什么会这样；更糟糕的是，我的应用程序中有一段非常相似的代码，但我从来没有遇到过这个问题。所以我的问题是，“这段代码有什么问题？”，“为什么它正在做它正在做的事情？以及谁来修理它？ .

示例 FIDDLE

http://jsfiddle.net/r86KE/3/

Answer 1

您需要先clone() option 元素，然后再追加它们，这样您追加的是一个副本，而不是原始元素:

drop.empty().append(options.clone(true)); 

Example fiddle

请注意，您还可以通过将重复的功能重构为函数并将更改的部分作为参数传递来干燥该代码。