[英]jquery on change and multiple selects
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. 有两个函数,UpdateLanguages和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();
});
});
Your select
element id and the div
container to which you're adding that select element have same IDs. 您的select
元素ID和要添加该选择元素的div
容器具有相同的ID。 I suggest you change your div container IDs to something meaningful like this in your HTML 我建议您在HTML中将div容器ID更改为有意义的内容
<!-- 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. 现在,对脚本进行相应的更改以使用这些新的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
});
});
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! 让不断变化的人知道它指的是哪一个!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.