Display hidden form field based on select box choice
Question
Here is a form element I have.
<select id="state" name="state" style="width: 212px;">
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
</select>
What I want to do is below this add another select box element , if user chooses "not in Australia" in the options above. I am really after the cleanest lightest code possbile.
I am presuming we create a div and set visibility:hidden just not sure how to trigger it.
2 answers
solution1
9 ACCPTED 2012-01-11 00:36:09
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function (){
$("#state").change(function() {
// foo is the id of the other select box
if ($(this).val() != "notinoz") {
$("#foo").show();
}else{
$("#foo").hide();
}
});
});
</script>
</head>
<body>
<p>
<select id="state" name="state" style="width: 212px;">
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
</select>
</p>
<p id="foo" style="display:none;">
<select style="width: 212px;>
<option value="item1">Item</option>
<option value="item2">Item</option>
<option value="item3">Item</option>
</select>
</p>
</body>
solution2
6 2012-01-11 00:31:07
How about this? http://jsfiddle.net/JKqWf/4/
HTML
<select id="state" name="state" style="width: 212px;" onclick='test()'>
<option value="nsw">New South Wales</option>
<option value="qld">Queensland</option>
<option value="vic">Victoria</option>
<option value="nt">Northern Territory</option>
<option value="tas">Tasmania</option>
<option value="sa">South Australia</option>
<option value="wa">Western Australia</option>
<option value="act">Australian Capital Territory</option>
<option value="notinoz">Not in Australia</option>
</select>
<select id="extra" name="extra" style="display: none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JS
function test() {
if (document.getElementById('state').value == 'notinoz') {
document.getElementById('extra').style.display = 'block';
} else {
document.getElementById('extra').style.display = 'none';
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to display hidden form field based on select box choice
Defining hidden field value based on select box selection
Change Hidden Field Value Based on Dropdown Choice
Insert different value into hidden input field based on select form
Display text depending on a choice made in select box
Populate select drop-down based on choice of another select form field
Display text in field based on multiple check box selections in Adobe Form
Populate based on choice values in select field
Enabling & disabling form's field based on the choice of radio button & select option together
OnClicking Checkbox display a Hidden Select Box
Related Tags