JavaScript not executing when dropdown option is changed

Question

I'm trying to work with JavaScript for the first time. I have gotten a dropdown list to do what I wanted thanks to help on this forum:

$('select').change(function(){
    const options = $("option");
    let selectedOption = "";
    let directDisplayString = "";
    options.each(function(index){
        let option = options[index];
        if($(option).prop("selected")) {
            selectedOption = $(option).val();
        };
        if(selectedOption === "450 Litre") {
            directDisplayString = '450 Litre Direct Storage Vessel with:';
        };
        if(selectedOption === "550 Litre") {
            directDisplayString = '550 Litre Direct Storage Vessel with:';
        };
        if(selectedOption === "900 Litre") {
            directDisplayString = '900 Litre Direct Storage Vessel with:';
        };
    });
    $("#directChoiceDisplay").empty().append(directDisplayString);
});

Now, I have dropdown lists on multiple webpages on my site. I wanted to do a similar thing for each page. When I have added more script to my JavaScript file, the second bit of code doesn't seem to execute:

$('select').change(function(){
    const options2 = $("option");
    let selectedOption2 = "";
    let stainlessDisplayString = "";
    options2.each(function(index){
        let option2 = options2[index];
        if($(option2).prop("selected")) {
            selectedOption2 = $(option2).val();
        };
        if(selectedOption2 === "3 kW 385 mm") {
            stainlessDisplayString = '3 kW 385mm immersed 2 1/4 BSP 1/3 Phase 240/415v';
        };
        if(selectedOption2 === "6 kW 385 mm") {
            stainlessDisplayString = '6 kW 385mm immersed 2 1/4 BSP 1/3 Phase 240/415v';
        };
        if(selectedOption2 === "9 kW 410 mm") {
            stainlessDisplayString = '9 kW 410mm immersed 2 1/4 BSP 1/3 Phase 240/415v';
        };
        if(selectedOption2 === "12 kW 585 mm") {
            stainlessDisplayString = '12 kW 585mm immersed 2 1/4 BSP 3 Phase 415v';
        };
    });
    $("#stainlessChoiceDisplay").empty().append(stainlessDisplayString);
});

I'm guessing my problem is ambiguity in the names of the different dropdown lists or something like that. I've tried to play around with names to fix it, but to no avail.

Any help would be greatly appreciated.

A test version of the webpage that is not working is here.

(A version of the page that IS working is here).

Are any errors logged at console? Is there more than one <select> element within the HTML document? — guest271314
– guest271314, Commented Jan 28, 2018 at 23:38
Are you waiting for the document to load before calling $('select').change? — Austin Brunkhorst
– Austin Brunkhorst, Commented Jan 28, 2018 at 23:39

vicbyte · Accepted Answer · 2018-01-30 13:52:52Z

First of all, as suggested in comments, you should wait for the document to load before registering those event handlers. Since youre using jQuery this can be done with simple:

$(document).ready(function(){
  //Put your code here
});

Secondly, this part of the code might be problematic:

const options2 = $("option");

Because it will select not only the options in the select you are changing, but ANY option elements you might happen to have in the page (i.e. if you have multiple select elems, it will select options of each one of them), better idea might be something like:

$('select').change(function(){
    var options = $(this).children('option');
    //rest of the code
});

That will select only the options belonging to the select you are changing.

Also, instead of using something like:

options2.each(function(index){
    let option2 = options2[index];
    if($(option2).prop("selected")) {
    ...
});

Use the second parameter of the .each() callback function (that function gets two parameters current item index and current item):

options2.each(function(index, elem){
    if (elem.prop('selected')) {
    ...
});

Lastly, since you are getting the options just to get the selected value, you can use the .val() on the select iself:

$('select').change(function(){
    $(this).val(); //this contains the current selected option value
});

@Edit: Since you added links to the site, the problem with your code lies also in multiple $('select').change() definitions, since that means that for every select element change found on page each and every of those handlers will be run. What you should do instead, is for example add each of the selects an unique ID and then your code should look like:

$('#selectWithSomeID').change(function(){
    val directDisplayString = "",
        directDisplayExtras = "",
        directDisplayPrice = "";
    if ($(this).val() === "450 Litre"){
        directDisplayString = '450 Litre Direct Storage Vessel with:';
        directDisplayExtras = '50 Litre Expansion Vessel'+'<br/>'+'1" Combination Valve (3 Bar PRV / 6 Bar SRV)'+'<br/>'+'3/4" T&P Valve 90Â°C 7 Bar, 25 kW Discharge Rate'+'<br/>'+'Tundish';
        directDisplayPrice = "ÂŁ2,750";
    }
    else if ($(this).val() === "somethingelse")
    ...
    $("#directChoiceDisplay").text(directDisplayString);
    $("#directChoiceExtras").text(directDisplayExtras);
    $("#directChoicePrice").text(directDisplayPrice);
});

Collectives™ on Stack Overflow

JavaScript not executing when dropdown option is changed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related