zoukankan      html  css  js  c++  java
  • ajax实现下拉列表联动

    下拉框代码

    <fieldset style="margin-bottom:5px;">
    <div class="form-group">
    <label for="disabledSelect" class="col-sm-4 control-label">医院名称</label>
    <div class="col-sm-8">
    <select id="hospitalCode" class="form-control" name="hospitalCode" onchange="handle();">
    <c:forEach items="${institutionList }" var="institution">
    <option value="${institution.medInstitutionCode }" <c:if test="${institution.medInstitutionCode == doctorSchedule.hospitalCode }">selected="selected"</c:if>>${institution.medInstitutionName }</option>
    </c:forEach>
    </select>
    </div>
    </div>
    </fieldset>

    <input type="hidden" name="scheduleId" value="${doctorSchedule.scheduleId }"/>
    <input type="hidden" name="id" value="${doctorSchedule.id }"/>
    <fieldset style="margin-bottom:5px;">
    <div class="form-group">
    <label for="disabledSelect" class="col-sm-4 control-label">科室名称</label>
    <div class="col-sm-8">
    <select id="keshiCode" class="form-control" name="keshiCode" onchange="keshi();">
    <option value="${doctorSchedule.keshiCode }">${doctorSchedule.keshi }</option>
    </select>
    </div>
    </div>
    </fieldset>
    <fieldset style="margin-bottom:5px;">
    <div class="form-group">
    <label for="disabledSelect" class="col-sm-4 control-label">医生姓名</label>
    <div class="col-sm-8">
    <select id="doctorId" class="form-control" name="doctorId">
    <option value="${doctorSchedule.doctorId }">${doctorSchedule.doctorName }</option>
    </select>
    </div>
    </div>
    </fieldset>

    js代码

    <script type="text/javascript">
    function handle(){
    var hospitalCode = $("#hospitalCode").val();
    //alert(aaa);
    $.ajax({
    type: "post",
    url: "xxx.json",
    data: {"hospitalCode":hospitalCode},
    dataType: "json",
    success: function(date){
    //var dataObj = eval("("+data+")");
    var dataObj = eval(date);
    //alert(dataObj.data[0].keshiName);
    var dataArr = dataObj.data;
    var keshi = $("#keshiCode");
    keshi.empty();
    if(date==null){
    keshi.append("<option value = '-1'>"+"科室为空"+"</option>");
    }
    if(dataArr!=null){
    for(var i =0;i<dataArr.length;i++){
    var item=dataArr[i];
    keshi.append("<option value = '"+item.keshiCode+"'>"+item.keshiName+"</option>");
    };
    }
    }
    });
    }

    function keshi(){
    var keshiCode = $("#keshiCode").val();
    //alert(keshiCode);
    $.ajax({
    type: "post",
    url: "xxx.json",
    data: {"keshiCode":keshiCode},
    dataType: "json",
    success: function(date){
    //var dataObj = eval("("+data+")");
    var dataObj = eval(date);
    //alert(dataObj.data[0].keshiName);
    var dataArr = dataObj.data;
    var doctor = $("#doctorId");
    doctor.empty();
    if(date==null){
    doctor.append("<option value = '-1'>"+"医生为空"+"</option>");
    }
    if(dataArr!=null){
    for(var i =0;i<dataArr.length;i++){
    var item=dataArr[i];
    doctor.append("<option value = '"+item.doctorId+"'>"+item.userName+"</option>");
    };
    }
    }
    });
    }
    </script>

    海纳百川 有容乃大 壁立千仞 无欲则刚
  • 相关阅读:
    什么时候用GET?什么时候用POST?
    Oracle存储过程in、out、in out 模式参数
    oracle的spool功能
    xshell-常用命令
    js Date()日期函数浏览器兼容问题解决方法
    spring-quartz
    spring-quartz普通任务与可传参任务
    MySQL服务安装和可视化工具安装
    PL/SQL Developer 查询的数据有乱码或者where 字段名=字段值 查不出来数据
    Windows下安装Redis服务
  • 原文地址:https://www.cnblogs.com/luchangyou/p/5775643.html
Copyright © 2011-2022 走看看