标签:
html部分:
<select id="department"> <option>----请选择部门----</option> <option>市场部</option> <option>技术部</option> <option>行政部</option> </select> <select class="bu"> <option>----请选择分部----</option> </select> <select style="display: none" class="bu"> <option>1部</option> <option>2部</option> <option>3部</option> </select> <select style="display: none" class="bu"> <option>4部</option> <option>5部</option> </select> <select style="display: none" class="bu"> <option>6部</option> <option>7部</option> <option>8部</option> </select> <select class="personnel"> <option>----请选择人员----</option> </select> <select style="display: none" class="personnel"> <option>小明</option> <option>小花</option> <option>小强</option> <option>小雨</option> <option>小雪</option> </select> <select style="display: none" class="personnel"> <option>明明</option> <option>花花</option> <option>强强</option> <option>雨雨</option> <option>雪雪</option> </select> <select style="display: none" class="personnel"> <option>明</option> <option>花</option> <option>强</option> <option>雨</option> <option>雪</option> </select>
js部分:(此处需要引入jquery.js)
<script type="text/javascript"> $(document).ready(function(){ $("#department").change(function(){ $("#department option").each(function(i,o){ if($(this).attr("selected")){ $(".bu").eq(i).show(); $(".bu").eq(i). siblings(".bu").hide() } $(".bu").change(function(){ $(".bu option").each(function(i,o){ if($(this).attr("selected")) { $(".personnel").eq(i).show(); $(".personnel").eq(i). siblings(".personnel").hide() } });}) }); }); }); </script>
标签:
原文地址:http://www.cnblogs.com/shanhaihong/p/5691536.html