Datalist建議在Chrome中顯示爲無關的textarea

Question

好的，div的問題在於此。

<table id="torFormContainer"> 
      <tbody><tr> 
       <th colspan="2"> 
        New Time Off Request 
       </th> 
      </tr> 
      <tr id="supebox"> 
       <td> 
        *Supervisor: 
       </td> 
       <td> 
        <input name="supe" id="supe" type="text" list="supes" required=""> 
        <datalist id="supes"> 
<option value="Ashley Helms"> 
    </option><option value="Dan Boling"> 
    </option><option value="Daniel Jenkins"> 
    </option><option value="Hannah Amos"> 
    </option><option value="Keith Underwood"> 
    </option><option value="Shane Smith"> 
    </option><option value="Wade Horton"> 
    </option></datalist> 

       </td> 
      </tr> 
      <tr id="sdatebox"> 
       <td class="left"> 
        *Start Date: 
       </td> 
       <td class="right"> 
        <input type="date" id="sdate" name="sdate" min="2014-06-11" onblur="testSdate();" onchange="testSdate();" placeholder="YYYY-MM-DD" required=""> 
       </td> 
      </tr> 
      <tr id="edatebox"> 
       <td class="left"> 
        *End Date: 
       </td> 
       <td class="right"> 
        <input id="edate" name="edate" type="date" onblur="testEdate();" onchange="testEdate();" placeholder="YYYY-MM-DD" required=""> 
       </td> 
      </tr> 
      <tr id="reasonbox"> 
       <td class="left"> 
        *Reason: 
       </td> 
       <td class="right"> 
        <select id="reason" name="reason" required=""> 
         <option value="0" disabled="true">Select a Reason</option> 
         <option value="3">Comp</option> 
<option value="6">Death in Family</option> 
<option value="4">Family Leave</option> 
<option value="5">Personal Leave</option> 
<option value="2">Sickness</option> 
<option value="1">Vacation</option> 

        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        Comment: 
       </td> 
       <td> 
        <textarea id="comment" placeholder="Optional" rows="5" cols="30"></textarea> 
       </td> 
      </tr> 
      <tr> 
       <td class="left" id="required"> 
        *Required 
       </td> 
       <td id="submit"> 
        <input id="torSub" type="button" value="Submit" onclick="torPreSubmit();"> 
       </td> 
      </tr> 
     </tbody></table> 

出於某種原因，並就我所看到的，僅適用於Chrome，做主管的名字之後，文本區域也顯示出從主管名單的建議名單。現在，這可能是我忽略的一些愚蠢的東西，並且有一些jquery檢查日期等，但是我不能在我的生活中弄清楚這一點。下面的一些jquery。

function torPreSubmit(){  
     var submit = true; 
     if($('#sdate').val()===""){ 
      $('#sdatebox').css('outline','thin solid red'); 
      console.log("sdate fail"); 
      submit = false; 
     }else{ 
      console.log("sdate pass"); 
      $('#sdatebox').css('outline',''); 
     } 
     if($('#edate').val()===""){ 
      $('#edatebox').css('outline','thin solid red'); 
      console.log("edate fail"); 
      submit = false; 
     }else{ 
      console.log("edate pass"); 
      $('#edatebox').css('outline',''); 
     } 
     if($('#supe').val()===""){ 
      $('#supebox').css('outline','thin solid red'); 
      console.log("supe fail"); 
      submit = false; 
     }else{ 
      console.log("supe pass"); 
      $('#supebox').css('outline',''); 
     } 
     if($('#reason').val()===null){ 
      console.log("reason fail"); 
      $('#reasonbox').css('outline','thin solid red'); 
      submit = false; 
     }else{ 
      console.log("reason pass"); 
      $('#reasonbox').css('outline',''); 
     } 
     if(submit){ 
      torSubmit(); 
      $('#reasonbox').css('outline',''); 
      $('#edatebox').css('outline',''); 
      $('#sdatebox').css('outline',''); 
     } 
    } 

function testSdate(){ 
    $("#edate").val(''); 
    if(Date.parse($("#sdate").val())<=Date.today()){ 
     $('#sdate').val(''); 
    }else{ 
     $('#edate').attr('min',$("#sdate").val()); 
    } 
} 

function testEdate(){ 
    if((Date.parse($("#edate").val())<Date.today())||(Date.parse($("#edate").val())<Date.parse($("#sdate").val()))){ 
     $('#edate').val(''); 
    } 
} 

Answer 1

建議您檢查鉻瀏覽器的版本，數據列表與瀏覽器版本35及以下有問題。他們已經修復了它的beta版本36，你將需要從這裏下載https://www.google.com/intl/en/chrome/browser/index.html?extra=betachannel#eula這將更新你的瀏覽器，並且該網站將工作順利...... !!!

希望這有助於

乾杯..