jquery удаляет мои html selects

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

Не e, что вы также можете СУХОЙ, чтобы код обновлялся путем повторной обработки повторяющихся функций в функции и передачи изменяемых частей в качестве параметров.

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