효율적인 jquery 방법으로 텍스트 상자에서 항목 및 위치를 선택하십시오.

Question

JQuery를 사용하여 콤보 박스에서 항목을 선택하고 텍스트 필드에 배치하는 방법으로 구현하고 효율적인 방법으로 문제가 있습니다. 아래 이미지를 보시오. 문제는 다음과 같습니다. 우선 콤보 박스에서 1을 선택하고 원하는 요소를 바르게 표시합니다. 그러나 나중에 두 번째 콤보 박스에서 이전과 현재 변경 사항을 선택할 때 나타납니다. 전체 코드는 다음과 같습니다.

$("input[name^=pasta_text]").focus(function() { 
    var gecerliid=$(this).parent().get(0).id; 
    var mevcutdeger=$(this).val(); 
    var sondeger=$(this).val(); 
    var seciliGrup=""; 
    if(typeof orjinal === "undefined") { 
     var orjinal=$(this); 
    } else { 
     delete orjinal; 
     var orjinal=$(this); 
    } 

    alert($("#pastatext["+gecerliid+"]").id()); 

    if($.inArray(mevcutdeger,Knowledge)>=0) { seciliGrup="Knowledge"; mevcutgrup=0; mevcutsira=$.inArray(mevcutdeger,Knowledge); } 
    if($.inArray(mevcutdeger,Comprehension)>=0) { seciliGrup="Comprehension"; mevcutgrup=1; mevcutsira=$.inArray(mevcutdeger,Comprehension); } 
    if($.inArray(mevcutdeger,Application)>=0) { seciliGrup="Application"; mevcutgrup=2; mevcutsira=$.inArray(mevcutdeger,Application); } 
    if($.inArray(mevcutdeger,Analysis)>=0) { seciliGrup="Analysis"; mevcutgrup=3; mevcutsira=$.inArray(mevcutdeger,Analysis); } 
    if($.inArray(mevcutdeger,Synthesis)>=0) { seciliGrup="Synthesis"; mevcutgrup=4; mevcutsira=$.inArray(mevcutdeger,Synthesis); } 
    if($.inArray(mevcutdeger,Evaluation)>=0) { seciliGrup="Evaluation"; mevcutgrup=5; mevcutsira=$.inArray(mevcutdeger,Evaluation); } 

    //$("#pasta_div").text(seciliGrup).show(); 
    $(this).hide(); 
    $("#learn_outcome").attr("size","49"); 
    $('input[name=pasta_submit], select[name=pasta_grup], select[name=pasta_fiil]').remove(); 

    $(this).before("<select name='pasta_grup' class='formin'>"); 
    //<select name='pasta_grup[".($s+1)."]' class='formin'><option value='-1'>GRUP</option></select><select name='pasta_fiil[".($s+1)."]' class='formin'><option value='-1'>FİİL</option></select><input type='button' value='OK' class='formbutton' name='pasta_submit' id='pasta_submit'> 
    $.each(taxonomy, function(key, value) { 
     $("select[name=pasta_grup]") 
       .append($('<option>', { value : key }) 
       .text(value)); 
    }); 
    $(this).before("</select>"); 
    $("select[name=pasta_grup]").val(mevcutgrup); 

    $("select[name=pasta_fiil]").remove(); 
    $(this).before("<select name='pasta_fiil' class='formin'>"); 
    fiilOlustur(mevcutgrup);   
    $("select[name=pasta_fiil]").val(mevcutsira).focus(); 
    $(this).before("</select>"); 
    $(this).before("<input type='button' value='OK' class='formbutton' name='pasta_submit'>"); 

    $("#pasta_div").text("mevcutdeger:"+mevcutdeger+" mevcutsira:"+mevcutsira+" mevcutgrup:"+mevcutgrup+" eleman:"+$(this).id); 

    $("select[name=pasta_grup]").live("change",function() { 
     mevcutgrup=$("select[name=pasta_grup] option:selected").val(); 
     $('select[name=pasta_fiil]').empty(); 
     fiilOlustur(mevcutgrup); 
     $('select[name=pasta_fiil] option:first').attr("selected","selected"); 
    }); 

    $("select[name=pasta_fiil]").live("change",function() { 
     sondeger=$("select[name=pasta_fiil] option:selected").text(); 
     orjinal.val(sondeger); 
     $("#pasta_div").text("post change: "+sondeger); 
    }); 

    $("input[name=pasta_submit]").live("click", function() { 
     orjinal.show().empty(); 
     sondeger = $("select[name=pasta_fiil] option:selected").text(); 
     $("#pasta_div").text("post click: "+sondeger); 
     orjinal.addClass("forminred").blur(function() { $(this).show(); }); 
     $('input[name=pasta_submit], select[name=pasta_grup], select[name=pasta_fiil]').remove(); 
    }); 

    $("#pasta_div").text("last level: "+sondeger); 
    //$("#pasta_div").text("sondeger: "+sondeger+" sonra: "+$(this).val()); 
    $(this).val(sondeger).addClass("forminred").blur(function() { $(this).show(); }); 

    function fiilOlustur(grupno) { 
     if(grupno==0) { $.each(Knowledge, function(key, value) { $('select[name=pasta_fiil]').append($('<option>', { value : key }).text(value)); }); } 
     if(grupno==1) { $.each(Comprehension, function(key, value) { $('select[name=pasta_fiil]').append($('<option>', { value : key }).text(value)); }); } 
     if(grupno==2) { $.each(Application, function(key, value) { $('select[name=pasta_fiil]').append($('<option>', { value : key }).text(value)); }); } 
     if(grupno==3) { $.each(Analysis, function(key, value) { $('select[name=pasta_fiil]').append($('<option>', { value : key }).text(value)); }); } 
     if(grupno==4) { $.each(Synthesis, function(key, value) { $('select[name=pasta_fiil]').append($('<option>', { value : key }).text(value)); }); } 
     if(grupno==5) { $.each(Evaluation, function(key, value) { $('select[name=pasta_fiil]').append($('<option>', { value : key }).text(value)); }); } 
    } 

    /*if(seciliGrup<>"") { 
     fiilFonksiyon(); 
    }*/ 

    /*var mevcutdeger=$(this).index(); 
    $("#pasta_div").text(mevcutdeger).show(); 
    grupFonksiyon();*/ 
}); 

JQuery를 사용하여보다 효율적으로 구현하는 방법을 안내해 주시겠습니까? 내 문제를 해결할 수있는 다른 방법이 있습니까? 감사합니다.

Answer 1

그래서 이름이 같은 선택 상자를, 네 코드는 확실히 하나의 선택 상자 값을 텍스트 상자에 값을 기록합니다.

당신이 선택 박스 이름

sondeger = $("select[name=pasta_fiil] option:selected").text(); 

사용을 하드 코딩 때문에 "이"키워드는 선택 목록 상자에서 값을 얻을 수 있습니다.

sondeger = $(this).val(); // this will return you value from selected listbox,