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中，在执行主管名称后，textarea还会显示主管列表中的建议列表。现在，我可能忽略了一些愚蠢的东西，并且有一些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及更低版本的问题。他们在测试版36中修复了它，你需要从这里下载https://www.google.com/intl/en/chrome/browser/index.html?extra=betachannel#eula这将更新你的浏览器，网站将顺利运行...... !!!

希望这有帮助

干杯..

Datalist建议显示Chrome中不相关的textarea

1 个答案: