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.

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.

• javascript
• html

Share Improve this question Follow asked Jan 22, 2013 at 11:37 Wild WidowWild Widow 2,54944 gold badges2323 silver badges3434 bronze badges 1

• 2 Your server supports jQuery very well, I'm sure... It has nothing to do but deliver it to the browser. And web servers are great in doing this. – Sebastian vom Meer Commented Jan 22, 2013 at 11:41

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

Here is a little bit of code that should help you. You'll have to iterate over all of the option elements checking if they are selected. If one is, then you'll need to match it against "USA" -

Given this HTML -

<select id="country" multiple="multiple">
    <option value="usa">usa</option>
    <option value="canada">canada</option>
    <option value="israel">israel</option>
</select>

You would do something like this -

var selectCountry = document.getElementById('country');

var usaIsMarked = false;
selectCountry.onchange = function () {
    usaIsMarked = false;
    for (i = 0; i < selectCountry.options.length; i++) {
        var currentOption = selectCountry.options[i];
        if (currentOption.selected && currentOption.value == 'usa') {
            usaIsMarked = true;
        }
    }
    if (usaIsMarked) {
        alert("usa was marked!");
    }
};

Here is a simple demo

In order to test whether more than one option is selected you'll need to loop through the options and test the selected property:

window.onload = function() {
    var selectCountry = document.getElementById('country'),
        selectState = document.getElementById('state');

    selectCountry.onchange = function() {
        var options = this.options,
            selected = 0, i, o;

        // Loop over <option> tags
        for (i = 0, o = options.length; i < o; i++) {
            option = options[i];

            // If selected options are less than 1 and country value is NOT 'USA'
            if (selected <= 1 && this.value !== 'USA') {

                // ...check if option is selected and increment "selected" var if true
                if (option.selected) {
                    selected += 1;
                }
            } else {
                // ...otherwise disable the state select ad break out of the loop
                selectState.disabled = true;
                break;
            }
        }
    };
};

As SebastianG said though, running jQuery is not server-dependant. You can run jQuery on any server - you just need to ensure it is loading correctly from your server or chosen CDN before referencing 'jQuery' or the '$' alias. Here's a getting started tutorial that details including jQuery (Tiny URL'd for space): http://tinyurl./arhmcro