Question

I have two multi select boxes one for country list and one for state list

<select multiple="multiple" name="country[]" id="country" >
      <option value="0">Select a Country</option>


  <?php 
    foreach($country_list as $key=>$value){
    echo "<option value=\"$key\"";
      if($html['Country Name']==$key|| $row['Country Name']==$key){
       echo ' selected="selected"';
      }
    echo ">$value</option>\n";                                     
    }?>
</select>


<select multiple="multiple" name="state[]" id="state">
      <option value="">Select a State</option>
      <?php 
        foreach($state_list as $key=>$value){
        echo "<option value=\"$key\"";
          if($html['state']==$key|| $row['state']==$key){
            echo ' selected="selected"';
          }
        echo ">$value</option>\n";                                     

        }?>
    </select>

I have this javascript code

window.onload = function() {
    var selectCountry = document.getElementById('country');
    selectCountry.onchange = function() {
        document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
    };
};

This code disables the select box when countries other than USA is selected. I want it to be disabled even when more than 1 country is selected in the first drop down (If user selects USA and CAN, it should be disabled too). Any suggestions. I have the working code in Jquery, but my server doesn’t seem to support Jquery at all, I want it in Traditional JS.

Answer 1

Just go through all selected options and check if one of them has a value equal to USA:

selectCountry.onchange = function() {
        var disabled = false;
        for(var i = 0; i < this.options.length; i++){
            if(this.options[i].selected && this.options[i].value == 'USA') {
                disabled =true;
                break
            }
        }
        document.getElementById('state').disabled = disabled;
    };

Note that this will point to selectCountry element.

Also, server never “support” jquery. You just put jquery.js file under website directory and add a link to it on your website.

You can get slightly simpler code by using selecteOptions property, but can’t find if it is supported by all browsers:

var disabled = false;
    for(var i = 0; i<this.selectedOptions.length; i++){
        if(this.selectedOptions[i].value == "3") {
            disabled =true;
             break
        }
    }