jquery on change and multiple selects

Question

got a problem with having mutliple select dropdowns on a page, each of which has an associated change event. Each one works individually but if I have them both running, neither works. There are two functions, UpdateLanguages and UpdateNoChangeMotorSelection. I have two dynamically built dropdowns the user can select and when they choose from one of them, they update other areas of the page.

If I comment out either

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

or

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

The remaining one works perfectly. But if I have both of them running, then although both select dropdowns populate, nothing happens when they are changed.

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

Your select element id and the div container to which you're adding that select element have same IDs. I suggest you change your div container IDs to something meaningful like this in your HTML

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

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

Now make the corresponding changes to your script to use these new IDs.

    // 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

In case anyone else gets in the same situation, my error was that I was not defining 'which' of the selects the result was coming from. So instead of

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

I needed

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

So that the on change knew which one it was refering to!