验证jQuery中的Select选项

我正在尝试验证表单选择框，您是否可以帮助我使用jquery检查选项是否未选中，或者第一个选项是否从所选列表中选择，然后显示错误框，以及在结果中显示所选值是否正确

谢谢

请尝试以下代码：

检查是否未选择选项或是否选择了与值无关的第一个选项：

$(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();
        }
    });
});

这是

JS

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

您应该使用此按钮：

<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>

这是我的建议

请注意，我将第0个选项设置为空，以便值与select中的文本匹配

$(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库。最后，在第一个选项中使用value=，在第一个选项中使用text first1。我们不是来为您编写代码的。你需要尝试一下，并展示你的尝试。然后我们会帮你修复它。检查@Adeneo和Arun，你不一定想要一般性地预防默认值，只有在没有选择的情况下。Hanks MAnoj这是我想要的。欢迎。很乐意帮助。你能告诉我如何在正确或错误的过程中使用验证吗？我的意思是我在这里发布了一个问题，谢谢这个链接，现在请解释一下你的代码，selectedIndex@mplungjan哦，你说得对，你的解决方案更复杂..你是说不那么复杂：也是$error.toggleerror$有效。切换！错误其中var error=select.selectedIndex<1；多么浪费代码啊。

$("#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();
    }
});

<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>

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

$(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();
  });    
});