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>

    海纳百川 有容乃大 壁立千仞 无欲则刚
  • 相关阅读:
    Windows系统创建符号链接文件
    msi软件包无法安装
    删除我的电脑里面软件快捷方式
    本地连接速度100.0mbps变10.0mbps如何恢复
    如何清理多余的Windows桌面右键菜单
    Windows免密码远程桌面
    Win8节省C盘空间攻略
    利用FTP将Linux文件备份到Windows
    Windows服务器之间rsync同步文件
    解决“Word无法访问您试图使用的功能所在的网络位置”问题
  • 原文地址:https://www.cnblogs.com/luchangyou/p/5775643.html
Copyright © 2011-2022 走看看