使用datalist实现四级联动

<tr id="content1">
   <td>起始时间:<input type="text" name="Dates" id="begin" οnfοcus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" class="Wdate"/>
      结束时间:<input type="text" name="Dates1" id="begin1" οnfοcus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" class="Wdate"/>
   </td>
   <td><input placeholder="--请选择项目--" autocomplete="off"  type="text" list="data_list" name="projectName" id="projectName" οnchange="changeOne()"/>
      <datalist id="data_list"  ></datalist></td>
   <td><input placeholder="请填写工作负责人" name="workLeader" id="workLeader"/></td>
   <td><input placeholder="--请选择工作内容--" autocomplete="off" list="data_Two" name="workContent" id="workContent" οnchange="changeTwo()"/>
      <datalist id="data_Two"></datalist>
   </td>
   <td><input placeholder="--请选择相关手册--" autocomplete="off" list="data_Three" name="relatedManual" id="relatedManual" οnchange="changeThree()" />
      <datalist id="data_Three"></datalist>
   </td>
   <td><input placeholder="--请选择风险辨识--" autocomplete="off" list="data_Four" name="riskIdentific" id="riskIdentific" οnchange="changeFour()" />
      <datalist id="data_Four"></datalist>
      </td>
   <td><input placeholder="--请选择风险控制--" autocomplete="off" list="data_Five" name="riskControl" id="riskControl" />
      <datalist autocomplete="off" id="data_Five"></datalist></td>

   <td><input name="riskController" id="riskController"/></td>
   <td></td>
</tr>

 

 

 

 

$(document).ready(function(){

       $.ajax({
           url:"${pageContext.request.contextPath}/jyfk/JyDatas",
           type:"GET",
           success:function (res) {
         var dataList = "";
               $.each(res.data, function (index) {
                   dataList += "<option data-id='"+res.data[index].id+"' data-value='"+res.data[index].name+"'  value ='"+res.data[index].name+"'></option>"
               });
               $("#data_list").append(dataList);
           }
       });

   });
   //一级改变后
//显示内容
   function changeOne() {
       var input_select=$("#projectName").val();
       var option_length=$("#data_list option").length;
       var option_id='';
       for(var i=0;i<option_length;i++){
           var option_value=$("#data_list option").eq(i).attr('data-value');
           if(input_select==option_value){
               option_id=$("#data_list option").eq(i).attr('data-id');
               break;
           }
       }
       document.getElementById("workContent").value="";
       document.getElementById("relatedManual").value="";
       document.getElementById("riskControl").value="";
       $("#data_Two").find("option").remove();
       $("#data_Three").find("option").remove();
       $("#data_Five").find("option").remove();
       $.ajax({
           url:"${pageContext.request.contextPath}/jyfk/JyDatas",
           type:"GET",
           data:{id:option_id},
           success:function (res) {
               var dataList = "";
               $.each(res.data, function (index) {
                   dataList += "<option data-id='"+res.data[index].id+"' data-value='"+res.data[index].name+"'  value ='"+res.data[index].name+"'></option>"
               });
               $("#data_Two").append(dataList);
           }
       })
   }
   //二级改变后
//显示手册
   function changeTwo() {
       var input_select=$("#workContent").val();
       var option_length=$("#data_Two option").length;
       var option_id='';
       for(var i=0;i<option_length;i++){
           var option_value=$("#data_Two option").eq(i).attr('data-value');
           if(input_select==option_value){
               option_id=$("#data_Two option").eq(i).attr('data-id');
               break;
           }
       }
       document.getElementById("relatedManual").value="";
       $("#data_Four").find("option").remove();
       $("#data_Three").find("option").remove();
       $.ajax({
           type:"GET",
           data:{id:option_id},
           url:"${pageContext.request.contextPath}/jyfk/JyDatas",
           success:function (res) {
               console.info(res.data)
               var dataList = "";
               $.each(res.data, function (index) {
                   dataList += "<option data-id='"+res.data[index].id+"' data-value='"+res.data[index].name+"'  value ='"+res.data[index].name+"'></option>"
               });
               $("#data_Three").append(dataList);
           }
       })
   }
   //三级改变后
   //风险辨识
   function changeThree() {
       var input_select=$("#relatedManual").val();
       var option_length=$("#data_Three option").length;
       var option_id='';
       for(var i=0;i<option_length;i++){
           var option_value=$("#data_Three option").eq(i).attr('data-value');
           if(input_select==option_value){
               option_id=$("#data_Three option").eq(i).attr('data-id');
               break;
           }
       }
       document.getElementById("riskIdentific").value="";
       $("#data_Five").find("option").remove();
       $.ajax({
           url:"${pageContext.request.contextPath}/jyfk/JyDatas",
           type:"GET",
      data:{id:option_id},
           success:function (res) {
               var dataList = "";
               $.each(res.data, function (index) {

                   dataList += "<option data-id='"+res.data[index].id+"' data-value='"+res.data[index].name+"'  value ='"+res.data[index].name+"'></option>"
               });
               $("#data_Four").append(dataList);
           }
       });
   }

   //四级改变后
   //风险控制
   function changeFour() {
       var input_select=$("#riskIdentific").val();
       var option_length=$("#data_Four option").length;
       var option_id='';
       for(var i=0;i<option_length;i++){
           var option_value=$("#data_Four option").eq(i).attr('data-value');
           if(input_select==option_value){
               option_id=$("#data_Four option").eq(i).attr('data-id');
               break;
           }
       }
       $.ajax({
           url:"${pageContext.request.contextPath}/jyfk/JyDatas",
           type:"GET",
           data:{id:option_id},
           success:function (res) {
               var dataList = "";
               $.each(res.data, function (index) {

                   dataList += "<option data-id='"+res.data[index].id+"' data-value='"+res.data[index].name+"'  value ='"+res.data[index].name+"'></option>"
               });
               $("#data_Five").append(dataList);
           }
       });
   }

 

转载于:https://my.oschina.net/u/3774949/blog/1923562