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>

    海纳百川 有容乃大 壁立千仞 无欲则刚
  • 相关阅读:
    asp.net发送email
    把GridView控件完全放入UpdatePanel中时,实现了点击编辑、更新等按钮时,页面不再刷新,对话框不起作用
    【原】 POJ 2352 Stars 树状数组 解题报告
    【原】 POJ 2739 Sum of Consecutive Prime Numbers 筛素数+积累数组 解题报告
    【原】 POJ 2262 Goldbach's Conjecture 筛素数 解题报告
    【原】 POJ 2593 Max Sequence 动态规划 解题报告
    【原】 POJ 2159 Tree Recovery 解题报告
    【原】 POJ 3067 Japan 2D树状数组+逆序数 解题报告
    【原】 POJ 2299 UltraQuickSort 逆序数 解题报告
    【原】 POJ 2499 Binary Tree 优化经典 解题报告
  • 原文地址:https://www.cnblogs.com/luchangyou/p/5775643.html
Copyright © 2011-2022 走看看