jquery二级联动select

时间 2019-12-05
原文原文链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>服务实例列表</title>
#parse("admin/include/common.vm")
</head>
<body>
<div class="swap">
<table class="list-box">
<form id="pForm" method="post" action="/member_rel/member_combine_list.htm">
<input type="hidden" name="pageNo" value="${pageBean.pageNo}"/>
<tr>
<td colspan="20"  class="query">
<span>业务类型：</span>
<select name="bizType" class="mr20" id="bizType">
<option value="">---请选择---</option>
</select>
<span>受权结果：</span>
<select name="biztype_status" class="mr20" id="biztype_status">
<option value="">---请选择---</option>
</select>
<span>会员ID：</span>
    <input type="text" size="10" name="memberId" value="$!{memberId}" class="mr20"/>
<input type="hidden" id="_bizType" value="$!bizType" class="mr20"/>
<input type="hidden" id="_biztype_status" value="$!biztype_status" class="mr20"/>
<span>开始时间：</span>
<input type="text" size="30" class="Wdate" name="startTime" value="$!startTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly/>&nbsp;&nbsp;结束时间&nbsp;&nbsp;
<input type="text" size="30" class="Wdate mr20" name="endTime" value="$!endTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly/>
<input type="submit" value="查询" class="btn mr10"/>
<input type="button" value="重置" class="btn" onclick="resetForm(this.form.id);getBizType(1);"/>
</td>
</tr>
<tr class="box-title">
<th colspan="20">
<span class="list-icon fl">子帐号受权列表</span>
<!--
<span  class="fr">
<a href="javascript:toAdd()">【新增记录】</a>
</span> 
-->
  </th>
</tr>
<tr>
<th>序号</th>
<th>业务类型</th>
<th>业务流水</th>
<th>会员ID</th>
<th>受权结果</th>
<th>受权时间</th>
<th>受权跟踪</th>
</tr>
#if($pageBean.list && $pageBean.list.size() != 0)
#foreach($member in $pageBean.list)
    <tr #if(${velocityCount}%2==0) class='t1' #else class='t2'#end>
#set($i=($pageBean.pageNo - 1) * $pageBean.pageSize + $velocityCount)
    <td>$i</td>
<td>
#if($!member && $!member.bizType == 4)
启用用户
#elseif($!member && $!member.bizType == 5)
停用用户
#elseif($!member && $!member.bizType == 6)
删除用户
#end
</td>
<td>$!member.id</td>
    <td>$!member.memberId</td>
    <td>
#if($!member.bizType == 4)
启用用户
#if($!member.resultStatus==0)
处理中
#elseif($!member.resultStatus==1)
成功
#elseif($!member.resultStatus==2)
失败
#end
#elseif($!member.bizType == 5)
停用用户
#if($!member.resultStatus==0)
处理中
#elseif($!member.resultStatus==1)
成功
#elseif($!member.resultStatus==2)
失败
#end
#elseif($!member.bizType == 6)
删除用户
    #if($!member.resultStatus==0)
处理中
#elseif($!member.resultStatus==1)
成功
#elseif($!member.resultStatus==2)
失败
#end
#end
</td>
<td>$!dateTool.format('yyyy-MM-dd HH:mm:ss',$!member.createTime)</td>
<td>
        <a href="javascript:bizRecordDetailList($!member.id,$!member.bizType);" style="color:red">
#if($!member.resultStatus==2)
<span style="color:red;">查看</span>
        #elseif($!member.resultStatus==1)
<span style="color:green;">查看</span>
#else
查看
#end
    </a>
    </td>
    </tr>
#end
#else
<tr>
<td colspan="8">
no data!
            </td>
</tr>
#end
#set($formId="pForm")
#set($pageNo=$pageBean.pageNo)
#set($pageSize=$pageBean.pageSize)
#set($totalCount=$pageBean.totalCount)
#set($columns=9)
#pagemodel( $formId $pageNo $pageSize $totalCount $columns )
</form>
</table><!-- end table -->
</div>
</body>
<script type="text/javascript">
function bizRecordDetailList(id,bizType){
   Pop.window("/biz_record/biz_record_detail_list.htm?bizId="+id+"&bizType="+bizType, 1200, 520, "子帐号受权流程跟踪", 3000);
    }
var areaJson = [
{"name":"--请选择--",
 "value":"",
         "status":[
            {"statusName":"--请选择--",
             "statusValue":""
 }
          ]},
        {"name":"启用",
 "value":"4",
         "status":[
            {"statusName":"启用成功",
             "statusValue":"1"
 },
             {"statusName":"启用失败",
             "statusValue":"2"
 }
          ]},
         {"name":"停用",
 "value":"5",
         "status":[
            {"statusName":"停用成功",
             "statusValue":"1"
 },
             {"statusName":"停用失败",
             "statusValue":"2"
 }
          ]},
{"name":"删除",
 "value":"6",
         "status":[
            {"statusName":"删除成功",
             "statusValue":"1"
 },
             {"statusName":"删除失败",
             "statusValue":"2"
 }
          ]},
];
        var temp_html='';
        var oBizType = jQuery("#bizType");
        var oBiztype_status = jQuery("#biztype_status");
var _bizType = jQuery("#_bizType").val();
        var _biztype_status = jQuery("#_biztype_status").val();
        //初始化订单类型
        function getBizType(id){
if(id==1){
_bizType='';
_biztype_status='';
}
            jQuery.each(areaJson,function(i,bizType){
if(_bizType == bizType.value){
temp_html+="<option value='"+bizType.value+"' selected>"+bizType.name+"</option>";
}else{
                    temp_html+="<option value='"+bizType.value+"'>"+bizType.name+"</option>";
}
            });
            oBizType.html(temp_html);
temp_html = "";
biz_status();
        };
        function biz_status(){
            temp_html = ""; 
            var n = oBizType.get(0).selectedIndex;
            jQuery.each(areaJson[n].status,function(i,bizStatus){
if(_biztype_status == bizStatus.statusValue){
                temp_html+="<option value='"+bizStatus.statusValue+"' selected>"+bizStatus.statusName+"</option>";
}else{
                temp_html+="<option value='"+bizStatus.statusValue+"'>"+bizStatus.statusName+"</option>";
}
            });
            oBiztype_status.html(temp_html);
temp_html = "";
        };
        //选择bizType改变bizStatus
        oBizType.change(function(){
            biz_status();
        });
 $(function(){
 getBizType(0);
 });
</script>
</html>