Question

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

JS：

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

FORM：

<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个事件受限于点击事件。

也许你想要这样的东西：

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

Answer 2

以下几点：1。您的标签具有与选择元素相同的ID，这会混淆jQuery。

您将click事件绑定到selectBox上的change事件，这是不必要的。

试试这个：

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

http://jsfiddle.net/6SuvK/

下拉验证脚本

2 个答案: