javascript - 下拉验证脚本

Question

我正在尝试修复此功能以在下拉列表中显示警报。我哪里错了？不出现警报。

JS：

<script type="text/javascript">
$(document).ready(function(){
$("#submit").click(function () {
    $( "#species" ).change(function(){
    if ( $(this).children(":selected").val() == "" ) {
    alert("empty");
    }
    });
});
});
</script>

形式：

<form>
<label for="species" id="species">*Species:</label><br />
<select id="species" name="species" size="1">
<option value="">Please choose a species</option>
<option value="21">Chicken</option>
<option value="28">Turkey</option>
</select>
<br />
<input type="submit" id="submit" value="Validate!" />
</form>

Answer 1

您有 2 个事件，第 2 个事件被绑定在 click 事件上。

也许你想要这样的东西：

<script type="text/javascript">
$(document).ready(function(){
    $("#submit").click(function () {
    if ( $("#species" ).children(":selected").val() == "" ) {
       alert("empty");
    }
    });
});
});
</script>

Answer 2

有几件事： 1. 你的标签和你的select元素有相同的 id，这会让 jQuery 感到困惑。

1. 您将单击事件绑定到 selectBox 上的更改事件，这是不必要的。

尝试这个：

$(document).ready(function(){
   $("#submit").click(function (e) {
       if($('#species').find(":selected").val()===""){
         alert("empty");
       }    
       e.preventDefault()
    });
});

http://jsfiddle.net/6SuvK/