jquery 更改和多选

Question

页面上有多个 select 下拉菜单时遇到问题，每个下拉菜单都有一个关联的更改事件。每个都单独工作，但如果我同时拥有它们运行，则两者都不起作用。有两个函数，UpdateLanguages 和 UpdateNoChangeMotorSelection。我有两个动态构建的下拉菜单，用户可以 select 当他们从其中一个中选择时，他们会更新页面的其他区域。

如果我注释掉其中一个

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

或

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

剩下的一个完美运行。但是，如果我同时拥有它们运行，那么虽然两个 select 下拉菜单都会填充，但是当它们被更改时什么也不会发生。

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 和您要添加 select 元素的 div 容器具有相同的 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

万一其他人遇到同样的情况，我的错误是我没有定义 'which' 结果来自的选择。所以而不是

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

我需要

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

以便 on change 知道它指的是哪一个！

jquery 更改和多选

jquery on change and multiple selects

html

javascript

jquery

select

multiple-instances