Control multiple-select box using a single select box using javascript

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

Do you have the jQuery Framework on your site or are you using plain JavaScript? — War10ck
– War10ck, Commented Dec 5, 2012 at 16:45

Felix Glas · Accepted Answer · 2012-12-05 16:58:45Z

2

Add this Javascript to your code:

<script type="text/javascript">
<!--
window.onload = function() {
    var selectCountry = document.getElementById('country');
    selectCountry.onchange = function() {
        document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
    };
};
//-->
</script>

answered Dec 5, 2012 at 16:58

Felix Glas

15.5k8 gold badges59 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Felix Glas Over a year ago

@srinivas No problem. If you are satisfied with any answer please choose to accept one of them. And good luck to you! :)

War10ck · Accepted Answer · 2012-12-05 16:57:23Z

0

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.

edited Dec 5, 2012 at 16:57

answered Dec 5, 2012 at 16:48

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

1 Comment

War10ck Over a year ago

@srinivas No problem man. Glad I could assist. Good luck and happy coding! :)

Collectives™ on Stack Overflow

Control multiple-select box using a single select box using javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related