使用datalist實現四級聯動

<tr id="content1">
   <td>起始時間:<input type="text" name="Dates" id="begin" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" class="Wdate"/>
      結束時間:<input type="text" name="Dates1" id="begin1" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})" class="Wdate"/>
   </td>
   <td><input placeholder="--請選擇項目--" autocomplete="off"  type="text" list="data_list" name="projectName" id="projectName" onchange="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" onchange="changeTwo()"/>
      <datalist id="data_Two"></datalist>
   </td>
   <td><input placeholder="--請選擇相關手冊--" autocomplete="off" list="data_Three" name="relatedManual" id="relatedManual" onchange="changeThree()" />
      <datalist id="data_Three"></datalist>
   </td>
   <td><input placeholder="--請選擇風險辨識--" autocomplete="off" list="data_Four" name="riskIdentific" id="riskIdentific" onchange="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);
           }
       });
   }