CODEWITHSUNDEEP
javascriptjquery
sebastian
sebastian

Reputation: 1554

Javascript: Disabling drop-down based on other drop-down

I have a Javascript function in my website. I don't know Javascript very well but, I want to modify it.

This section loads a third drop box, depending on the first two.

I want to modify it to disable the third one if the second drop box locatie's value is util.

jQuery( function () {
  jQuery("#util, #loc").change( function() {
    var locatie =  jQuery("#loc").val();
    var utilitate = jQuery("#util").val();

    if ( (locatie!= '---') && (utilitate!='---') ) 

        jQuery.getJSON("index.php?option=com_calculator&opt=json_contor&format=raw",{ locatie: locatie, utilitate: utilitate }, function (data) {
                var html = "";

                html += "<option name=den_contor value ='contor' >Alege Contorul</option>";
                if ( data.success == 'ok' ) 
                for (var i in data.val) 
                    html += "<option name=den_contor value ='"+ i+"' >" + data.val[i]+ " </option>";
                jQuery("#den_contor").html( html )    

        })

     })
  });`

Thanks, Sebastian

Upvotes: 1

Views: 501

Answers (1)

Blair McMillan
Blair McMillan

Reputation: 5349

This should work for you:

jQuery( function () {
  jQuery("#util, #loc").change( function() {
    var locatie =  jQuery("#loc").val();
    var utilitate = jQuery("#util").val();

    if ( (locatie!= '---') && (utilitate!='---') ) 

        jQuery.getJSON("index.php?option=com_calculator&opt=json_contor&format=raw",{ locatie: locatie, utilitate: utilitate }, function (data) {
                var html = "";

                html += "<option name=den_contor value ='contor' >Alege Contorul</option>";
                if ( data.success == 'ok' ) 
                for (var i in data.val) {
                    if (i != 'locatie' && data.val[i] != 'util') {
                        html += "<option name=den_contor value ='"+ i+"' >" + data.val[i]+ " </option>";
                    }
                }
                jQuery("#den_contor").html( html )    

        })

     })
  });

I added the line that starts with if (i != 'locatie' which checks to make sure that you are not looking at the locatie item and that the value is not util. If these are both true (ie. not locatie and not util) then we display the 3rd drop down.

Upvotes: 1

Related Questions