Question

我正在尝试验证THIS JSFIDDLE上的表单选择框。您能否帮助我使用jquery检查Optins是否未被选中，或者如果选择了第一个选项<option value="1">Select From The List</option>，则显示错误框，如果在#result中显示所选值是正确的。

<form>
    <select id="mySelect">
        <option value="1">Select From The List</option>
        <option value="2">First</option>
        <option value="3">Second</option>
        <option value="4">Third</option>
        <option value="5">Fourth</option>
    </select>
    <div id="error">Not selected!</div>
    <div id="valid">Validated!</div>
    <div id="result"></div>
    <br />
    <button type="submit" class="btn btn-default">Validate</button>
</form>


#error { color:red; display:none; }
#valid{ color:green; display:none; }

由于

Answer 1

试试此代码：Fiddle

$(document).ready(function () {
    $('form').submit( function(e) {
        var check=$('#mySelect').val();
        if ( check == '1' ) {
            $('#error').show();
            $('#valid').hide();
        }else{
            $('#error').hide();
            $('#valid').show();
        }
           e.preventDefault();
    });
});

Answer 2

检查是否未选择Options或是否选择了第一个选项而不涉及值：

$(document).ready(function () {
    $('form').on('submit', function(event) {
        event.preventDefault();
        var select = document.getElementById('mySelect');
        if(select.selectedIndex < 1){
            $('#error').show();
            $('#valid').hide();
        } else {
            $('#error').hide();
            $('#valid').show();
        }
    });
});

demo

Answer 3

这是JSFiddel Demo

<强> JS

$("#validate").on('click', function(e){
    var value=$("#mySelect").val(); //get selected value
    $(".validationStatus").hide(); //Hide all messages first
    if(value=="1")
    {
        e.preventDefault();
        $("#error").show();
    }
    else
    {
        e.preventDefault(); // You can remove this when submitting page
        $("#valid").show();
    }
});

请检查HTML中的更改。添加了验证消息的公共类。添加了按钮

的ID

Answer 4

你应该用这个：

<form id="target" action="javascript:">
    <select id="mySelect">
        <option value="1">Select From The List</option>
        <option value="2">First</option>
        <option value="3">Second</option>
        <option value="4">Third</option>
        <option value="5">Fourth</option>
    </select>
<div id="error">Not selected!</div>
    <div id="valid">Validated!</div>
    <p id="result"></p>
    <br />    
    <button type="submit" class="btn btn-default">Validate</button>
</form>

//////////////////////////////////////////// 脚本：

<script src="address of jquey.js"></script>
<script>
$(document).ready(function () {
$("#target").submit(function( event ) {
    displayVals();
});

});

function displayVals() {

    var singleValues = $( "#mySelect" ).val();

    if(singleValues == 1)
        $( "#error" ).css("display","block");

    else 
         $( "#valid" ).css("display","block");
  $( "#result" ).text(  singleValues );
}
</script>

/////////////////////////////// 的CSS：

#error { color:red; display:none; }
#valid{ color:green; display:none; }

Answer 5

这是我的建议

Live Demo

请注意我将第0个选项设为空，因此值与选择

中的文本匹配

$(function () {
  var validate = function() {
    var val = $('#mySelect').val(),error=val=="";
    $('#error').toggle(error);
    $('#valid').toggle(!error);
    return !error;
  }
  $('form').on('submit', function(e) {
    e.preventDefault(); // only if you NEVER will want to submit
    validate();
    // or 
    // if (validate()) ...
  });
  $('#mySelect').on("change",function() {
    $("#result").html($(this).val());
    validate();
  });    
});

验证jQuery中的Select Options

5 个答案: