Question

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

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

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

Answer 2

你必须抓住HTML。

像这样：

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

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

        //drop.append(options);

    }

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

        //drop.append(options);
    }

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

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

jquery正在删除我的html选择

2 个答案: