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>

    海纳百川 有容乃大 壁立千仞 无欲则刚
  • 相关阅读:
    蓝桥杯如何训练?(附VIP题库)
    scratch2.0的教材视频,王木头系列
    out文件 dev c++
    MongoDB 学习笔记
    golang 学习笔记 -- struct interface的使用
    goang学习笔记---struct
    golang 学习笔记 ---JSON
    golang学习笔记 ---rand
    golang学习笔记 --go test
    golang学习笔记---string && strconv
  • 原文地址:https://www.cnblogs.com/luchangyou/p/5775643.html
Copyright © 2011-2022 走看看