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>

    海纳百川 有容乃大 壁立千仞 无欲则刚
  • 相关阅读:
    oracle中常用的函数
    请求转发和URL重定向的原理和区别
    servlet的生命周期和servlet的继承关系
    Jdbc来操作事物 完成模拟银行的转账业务
    Map的嵌套 练习
    正则表达式练习
    学习 day4 html 盒子模型
    学习day03
    学习day02
    学习day01
  • 原文地址:https://www.cnblogs.com/luchangyou/p/5775643.html
Copyright © 2011-2022 走看看