Datalist 建议显示 Chrome 中不相关的文本区域

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

建议您检查chrome浏览器的版本，数据列表与浏览器版本35及以下版本有问题。他们已经在他们的 beta 版本 36 中修复了它，您需要从这里下载 https://www.google.com/intl/en/chrome/browser/index.html?extra=betachannel#eula 这将更新您的浏览器并且该网站将顺利运行......！！！

希望对你有帮助

干杯..