[英]Group different selection option dropdown list
我不確定這是html還是javascript技術。 我想要達到這樣的效果,僅顯示兩個選擇框,一旦單擊“印度”,另一個選擇框將僅顯示name="listtwo" id="listtwo"
選項name="listtwo" id="listtwo"
,如果單擊“美國name="listtwo" id="listtwo"
,則會顯示城市選項。 有人可以舉個例子。 非常感謝
印度美國德國
<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();
}
});
提琴供任何人查看: http : //jsfiddle.net/RPWPZ/3/
當然,您將必須添加印度以及所有您將要關心的其他國家的所有項目。
編輯:如果要在頁面加載時選擇國家,請查看此提琴中的更改: 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.