Question

`<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> </p>`


<p>Select A Country
<select name="country" id="country">
<option value="0">Select a Country</option>
<option value="USA">USA</option>                             
<option value="UK">UK</option>    
</select> </p>

I have two select boxes 1)state[] 2) country . What is want is that “If the selected country is not USA, disable the multi-select box which consists all the USA states”. Any help is appreciated

Answer 1

You could do the following if you have jQuery:

$('#country').change(function () {
    if($('#country').val() != "USA") {
        $('#state').attr('disabled', 'disabled');
    }
    else {
        $('#state').removeAttr('disabled');
    }
});

Or if you are using plain JavaScript:

var elem = document.getElementById("country");
elem.onchange = function () {
     if(elem.options[e.selectedIndex].value != "USA") {
         document.getElementById('state').disabled = "disabled";
     }
     else {
         document.getElementById('state').removeAttribute("disabled");
     }
}

This will disable the state combo box when the country combo box contains a value that is not “USA”. When the selected country is “USA”, it will remove the disabled attribute and make it usable again.

Hope this helps.