jQuery选择菜单验证器适用于FF和Chrome,但不适用IE

jQuery select menu validator works in FF and Chrome, but no on IE

本文关键字:Chrome 不适用 IE FF 菜单 选择 验证 适用于 jQuery      更新时间:2023-09-26

我使用一个简单的jQuery来验证选择菜单中至少有一个选项被选中。如果没有选择任何选项,提交按钮将停止工作,并在选择菜单上方以红色打印警告消息。

它在Chrome和Firefox中运行良好。在IE上,它不起作用。我不知道我做错了什么。

<form class="search_cars" action="http://www.domain.com/searchresults" method="get">
    <label>
        <select name="model" class="models">
            <option value="" selected="selected">Select Make</option>
            <option value="Acura">Acura</option>
            <option value="Audi">Audi</option>
            <option value="BMW">BMW</option>
            <option value="Buick">Buick</option>
            <option value="Cadillac">Cadillac</option>
            ....
        </select>
        <input name="submit" type="submit" value="search" class="search_button" />
    </label>
</form>

这是jQuery:

$(document).ready(function() {
    $('.search_cars').submit(function(e) {
        mydropdown = $('.models option:selected');
        if ($(mydropdown).val() == "") {
            $("div.warning").text("** Please Select A Make");
            $("div.warning").css({"color": "#F00"});
            e.preventDefault();
            return false;
        }
    });
});

谢谢你的帮助和建议。

UPDATE/SOLVED脚本与另一个占位符脚本创建冲突。最后对脚本进行了简化。这个看起来更好:

$(document).ready(function() {
    $('.search_cars').submit(function(e) {
        if($('.models').val() == "") {
            $("div.start_search").text("** Please Select A Make");
            $("div.start_search").css({"color": "#F00"});
            e.preventDefault();
            return false;
        }
    });
});

没有经过测试,但为什么要这样做:

mydropdown = $('.models option:selected');

使用jQuery,您可以轻松地请求如下值:

if($('.models').val() == "") {};

也许这可以解决你的IE问题

嘿,你可以使用下面的js

$(document).ready(function() {
    $('.search_cars').submit(function(e) {
        mydropdown = $('.models').val();
        if (mydropdown == "") {
            $("div.warning").text("** Please Select A Make");
            $("div.warning").css({"color": "#F00"});
            e.preventDefault();
            return false;
        }
    });
});

请参见demo demo