I am not sure if this is a html or javascript tech. I want to achieve like that, only show two select boxes, once I clicked India, another select box will shows only Indiacities options name="listtwo" id="listtwo"
, if clicked US, shows us cities options. Could someone please give an example. Many thanks
India US Germany
<select name="listtwo" id="listtwo">
<option value="Indiacity1">Indiacity1</option>
<option value="Indiacity2">Indiacity1</option>
<option value="Indiacity3">Indiacity1</option>
</select>
<select name="list3" id="list3">
<option value="Germany1">Germany1</option>
<option value="Germany2">Germany1</option>
<option value="Germany3">Germany1</option>
</select>
<select name="list4" id="list4">
<option value="US1">US1</option>
<option value="US2">US1</option>
<option value="US3">US1</option>
</select>
HTML:
<select id="country-select">
<option>--- Select One ---</option>
<option value="us">US</option>
<option value="germany">Germany</option>
</select>
<select id="us-select" class="sub-menu hide">
<option value="austin">Austin</option>
</select>
<select id="germany-select" class="sub-menu hide">
<option value="berlin">Berlin</option>
</select>
CSS:
.hide {
display: none;
}
jQuery:
$('#country-select').change(function (e) {
$('.sub-menu').hide();
var selectedCountry = $(this).val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
});
And the Fiddle for anyone to check out: http://jsfiddle.net/RPWPZ/3/
Of course you would have to add all the items for India, and any other countries you'll be caring about.
Edit: if you want a country selected when the page loads, look at the changes in this Fiddle: http://jsfiddle.net/RPWPZ/5/
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('select').hide();
$('#list2').show();
$('.country').click(function(e) {
$('select').hide();
$('#'+$(e.target).attr('sel')).show();
});
});
</script>
<a class="country" href="javascript:;" sel="list2">India</a>
<a class="country" href="javascript:;" sel="list3">Germany</a>
<a class="country" href="javascript:;" sel="list4">US</a>
<br><br>
<select name="list2" id="list2">
<option value="Indiacity1">Indiacity1</option>
<option value="Indiacity2">Indiacity1</option>
<option value="Indiacity3">Indiacity1</option>
</select>
<select name="list3" id="list3">
<option value="Germany1">Germany1</option>
<option value="Germany2">Germany1</option>
<option value="Germany3">Germany1</option>
</select>
<select name="list4" id="list4">
<option value="US1">US1</option>
<option value="US2">US1</option>
<option value="US3">US1</option>
</select>
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.