Question

在页面上有多个选择下拉列表时出现问题，每个页面都有一个关联的更改事件。每个人都单独工作，但如果我让它们都运行，那么它们都不起作用。有两个函数，UpdateLanguages和UpdateNoChangeMotorSelection。我有两个动态构建的下拉列表，用户可以选择，当他们从其中一个中选择时，它们会更新页面的其他区域。

如果我发表评论

$("#nochangemotorselection").html(nochangemotoroutput);

或

$('#language').html(languageoutput);

剩下的一个完美无缺。但如果我同时运行它们，那么虽然两个选择下拉列表都会填充，但是当它们被更改时没有任何反应。

function UpdateLanguages()
    {
        $.getJSON('php/languages.json', function(data)
            {//get the languages json file
            $.each(data.languages, function(key, val)
                   { //for each line of data in the languages.json file, get the key/value pair
            if(val.language == currentlanguage)
                        {
                            $('#texttransmission').text(val.texttransmission); 
                            $('#textcontroller').text(val.textcontroller);
                            $('#textmotor').text(val.textmotor);
                            $('#currentlanguage').text(currentlanguage); //displays in variable table
                        }
                    }); 
            });
    }

function UpdateNoChangeMotorSelection()
    {
        $.getJSON('php/products.json', function(data)
            {
            $.each(data.products, function(key, val)
                   { 
            if(val.commercialname == nochangemotorid)
                        {
                            $('#nochangemotorspeed').text(val.speed); 
                            nochangemotorspeed = val.speed;
                            $('#nochangemotorefficiency').text(val.efficiencyclass);
                            nochangemotorefficiency = val.efficiencyclass;
                            $('#nochangemotorpower').text(val.power);
                            nochangemotorpower = val.power;
                            $('#nochangemotorpoles').text(val.poles);
                            nochangemotorpoles = val.pole;
                            $('#nochangemotorchosen').text(nochangemotorid);//displays in variable table
                        }
                    }); 
            });
    }
// select language JSON     
$.getJSON('php/languages.json', function(data){//get the languages json file
    var languageoutput = '<select id="language" name="language" class="language">'; //start a variable called output full of html
    $.each(data.languages, function(key, val){ //for each line of data in the languages.json file, get the key/value pair
    languageoutput += '<option>' +val.language+ '</option>';    //add to the variable 'output' with the value from the languages field
    });//end of each
    languageoutput += '</select>';//add to the variable 'output'
    $('#language').html(languageoutput);//output result to the div with the id="languages"
    $( "#language" ).on('change', function() {
          var selectedlanguage = "";
         $( "select option:selected" ).each(function() {
            selectedlanguage += $( this ).text();
            });
        currentlanguage = selectedlanguage;
        DoUpdate();
    });
}); 



// select product JSON 
$.getJSON('php/products.json', function(data){
    var nochangemotoroutput = '<select id="nochangemotorselection" name="nochangemotorselection" class="nochangemotorselection">'; 
    $.each(data.products, function(key, val){ 
    if (val.productrange != 'Transmission')
        {
        if (val.productrange != 'Controller')
            {
            nochangemotoroutput += '<option>' +val.commercialname+ '</option>'; 
            }   
        }
    });
    nochangemotoroutput += '</select> ';
    $("#nochangemotorselection").html(nochangemotoroutput);
    $( "#nochangemotorselection" ).on('change', function() {
          var selectednochangemotor = "";
         $( "select option:selected" ).each(function() {
            selectednochangemotor += $( this ).text();
            });
        nochangemotorid = selectednochangemotor;
        UpdateNoChangeMotorSelection(); 
    });
});

Answer 1

您要添加的select元素ID和div容器，该select元素具有相同的ID。我建议您在HTML

中将div容器ID更改为有意义的内容

<!-- container for languages -->
<div id="language-div"> </div> 

<!-- container for products -->
<div id="product-div"> </div>

现在对脚本进行相应的更改以使用这些新ID。

    // select language JSON     
    $.getJSON('php/languages.json', function(data){
        var languageoutput = '<select id="language" name="language" class="language">'; 
        // add options to language
        languageoutput += '</select>';
        // now add it to your div
        $('#language-div').html(languageoutput);
       // register your change event on select element now
        $( "#language" ).on('change', function() {
              // your code
        }); 
   });

    // select product JSON 
    $.getJSON('php/products.json', function(data){
        var nochangemotoroutput = '<select id="nochangemotorselection" 
      name="nochangemotorselection" class="nochangemotorselection">'; 
        // add options to nochangemotorselection
        nochangemotoroutput += '</select> ';
        $("#product-div").html(nochangemotoroutput);
        $( "#nochangemotorselection" ).on('change', function() {
              // your code 
        });
    });

Answer 2

如果其他人遇到同样的情况，我的错误是我没有定义＆＃39;哪个＆＃39;选择结果来自。而不是

$( "select option:selected" ).each(function().....

我需要

$( "select.languages option:selected" ).each(function()....

这样，改变就知道它正在引用哪一个！

关于变更和多选的jquery

2 个答案: