公司部门二级联动的JS

最新推荐文章于 2024-09-11 15:33:18 发布

feng360

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量3.0k

点赞数 1

分类专栏： Jquery/JS 文章标签： function javascript c

本文链接：https://blog.csdn.net/feng360/article/details/7818944

版权

Jquery/JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<td>公司名称：</td>
<td> <select style="width:100px;"id="corpName"  name="corpName">
                   <option readonly="true" value="">--请选择--</option>
                   <c:forEach var="corp" items="${corpBean}" >
                   <option  value="${corp.corpName}" ><c:out value="${corp.corpName}"/></option>
                 </c:forEach>
            </select>                   
</td>
<td> 部门名称:</td>
<td> <select style="width:100px;"id="deptName" name="deptName">
        <option readonly="true" value="">--请选择--</option>
        <c:forEach var="dept" items="${deptBean}" >
        <option  value="${dept.deptName}" parentid="${dept.corpName}"  ><c:out value="${dept.deptName}"/></option>
     </c:forEach>
 </select

<script type="text/javascript" language="javascript">
$(function(){
 $("#corpName").unbind("change", corpChange ).bind("change", corpChange);
 $("#deptName").unbind("change", deptChange).bind("change",deptChange);<span style="color:#FF0000"></span>
$("#corpName").change();
});
function corpChange (){
var selectedValue = $("#corpName").val();
$("#deptName").children("span").each(function(){
$(this).children().clone().replaceAll($(this)); });
 if($.trim(selectedValue) != ""){
 $("#deptName").children("option[parentid!='" + selectedValue + "'][value!='']").each(function(){
$(this).wrap("<span style='display:none'></span>");
});
}
}
function deptChange(){
$("#corpName").val($(this).children("option:selected").attr("parentid"));
}
</script>

主要是通过parentid来实现公司名称改变的时候，将不是选中公司的部门隐藏。

另外注意$("#corpName").change();在页面重新刷新时候，需要触发select的change事件。