Question

通过使用JQuery从组合框中选择和项目并将其放在文本字段中，我在实现和有效方法方面存在问题。请看下面的图像问题是当首先我选择并且从1所示的组合框中选择元素时它将项目正确放置在2所示的所需文本字段中，但稍后当我从第二个组合框中选择前一个以及当前的更改时。整个代码如下。

    $("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以更有效的方式实现它？有没有其他方法可以解决我的问题？谢谢。

enter image description here

Answer 1

所以你有一个具有相同名称的选择框，是的，你的代码肯定只会选择一个选择框值并将值写入文本框。

因为您对选择框名称进行了硬编码

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

使用“this”关键字从所选列表框中获取值。

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

高效的jquery方式来选择项目并放置在文本框中

1 个答案: