正在验证多个选择框

Validating multiple select box

本文关键字：选择 验证      更新时间：2023-09-26

选择框1 

<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>

选择框2 

<select name="slt_drop2" id = "slt_drop2">
<option value ="0">----------</option>
...........
</select>

选择框3

<select name="slt_drop3" id = "slt_drop3">
<option value ="0">----------</option>
...........
</select>

选择框4 

<select name="slt_drop4" id = "slt_drop4">
<option value ="0">----------</option>
...........
</select>

在一个HTML表单中，我已经使用了4个选择按钮，如果用户选择的值为"0"即(默认值)在任何选择按钮，它应该显示消息附近的选择按钮，"请选择正确的值"为特定的，例如，如果slt_drop3的值为"0"，它应该警报附近的slt_drop3选择选项。该消息应该显示单个按钮，而不是普通的警报。

也许这就是你想要的?演示

$("select").change(function()
{
   if($(this).val() == "0")
       $(this).after(' <small> please select the correct value</Small>');
    else
        if($(this).next().prop("tagName").toLowerCase() == "small")
            $(this).next().remove();
});
$("select").trigger("change");

在你的项目中使用jQuery吗?我认为当你改变select的值并验证它时，你可以听到:

$(function() {
    $('select').on('change', validate);
    function validate(e) {
      var select = $(e.currentTarget);
      var id = select.attr('id');
      var val = select.val();
      if (val === '0') {
        showMessage(id);
      } else {
        hideMessage(id);
      }
    }
    function showMessage(id) {
      $('.message[data-select-id="' + id + '"]').show();
    }
    function hideMessage(id) {
      $('.message[data-select-id="' + id + '"]').hide();
    }
});

在每个select标签附近添加消息块，并在必要时显示

<select name="slt_drop1" id = "slt_drop1">
<option value ="0">----------</option>
...........
</select>
<div class='message' data-select-id='slt_drop1'>please select the correct value</div>
  1. 为每个SELECT元素添加一个通用类。
  2. 使用jQuery来选择匹配的元素
  3. 将一个更改事件绑定到选择器，并应用逻辑来检查"0"值

$(document).ready(function() {
            $('select.is-valid').change(function() {
                var $el = $(this);
                if($el.val() == 0) {
                    $el.after('<div>Select a different value</div>');
                }
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test[]" class="is-valid">
    <option value="0">---</option>
    <option value="1">1</option>
</select>
<select name="test[]" class="is-valid">
    <option value="0">---</option>
    <option value="1">1</option>
</select>
<select name="test[]" class="is-valid">
    <option value="0">---</option>
    <option value="1">1</option>
</select>

这是你想要达到的一个基本的例子。实际的元素/验证位置由您决定。我建议做一个"提交"按钮来检查验证，但我假设你知道怎么做。

相关文章：