如何使用 html 和 javascript 验证动态 select DropDown？

Question

我有一个包含教育详细信息的表格，其中有一个下拉菜单提供 4 个选项

学校教育
毕业
post毕业
其他

现在我正在做的是允许用户填写这些详细信息，但我想要的是用户不能 select 一种教育类型不止一次，这意味着用户可以 select 上学一次，毕业一次依此类推，我希望在客户端进行此验证，即 js/jquery

image for reference

    function checkUserEducation() {
        const userSelectedEducationArray = $("select[name='educationType[]']").map(function() {
            return $(this).val();
        }).get();

        //checks if any education type is empty
        if (userSelectedEducationArray.includes("")) {
            $('#educationErrorMsg').show();
        } else {
            $('#educationErrorMsg').hide();
        }

        if (countElement('schooling', userSelectedEducationArray) > 1) {
            // $('#educationErrorMsg').show();
            $('#educationErrorMsg').after("*schooling can be chosen only one time");
        } else {

        }

        if (countElement('graduation', userSelectedEducationArray) > 1) {
            $('#educationErrorMsg').after("</br>*graduation can be chosen only one time");

        } else {

        }

        if (countElement('post_graduation', userSelectedEducationArray) > 1) {
            $('#educationErrorMsg').after("</br>*post graduation can be chosen only one time");

        } else {

        }

        if (countElement('others', userSelectedEducationArray) > 1) {
            $('#educationErrorMsg').html("</br>*others can be chosen only one time");

        } else {

        }
    }

    function countElement(item, array) {
        var count = 0;
        $.each(array, function(i, v) { if (v === item) count++; });
        return count;
    }

我正在尝试进行此验证，但没有得到适当的结果所以关于这个的任何帮助

<select class="form-control" id="educationType" name="educationType[]" aria-label="Select Education Type">
    <option selected value="">Select type</option>
    <option value="schooling">Schooling</option>
    <option value="graduation">Graduation</option>
    <option value="post_graduation">Post Graduation</option>
    <option value="others">Others</option>
</select>

这是我要验证的 select 下拉菜单所以任何提示或验证技巧都会非常有帮助谢谢!!

Answer 1

英语不是我的主要语言，但我会尽力解释。为您要检查的所有选择提供相同的 class 然后更改函数循环遍历给定 class 的所有元素如果您使用 form-repeater 则比较元素的名称以避免与同一元素进行比较。如果你不使用 form-repeater 添加一个“data-counter” 元素添加在每个新添加时增加它的值，

之后只是比较元素的值，如果相同则显示警报

var count = 1;
$(document).on("click", ".add-btn", function () {
  $("#clone")
    .find(".gg").addClass('test-select')
    .attr("data-counter", count++);
  $("#Main").append($("#clone").html());
  $("#clone")
    .find(".gg").removeClass('test-select');
});

$(document).on("change", ".test-select", function () {
  const This = $(this);
   $(".test-select").map(function() {
    if(this.getAttribute('data-counter') !== $(This).attr('data-counter')){
      if($(this).val() == $(This).val()){
        alert('repeat');
        $(This).css('background-color','red')
}
    }
});
  

  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>stack question</title>
</head>
<body>
    <div id="Main" class="row p-1">
  <div class="col-md-8">
    <select class="form-select test-select" data-counter="0"  name="test[]" aria-label="Default select example">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-md-4">
    <button type="button" class="btn btn-primary add-btn">Add</button>
  </div>
</div>

<div class="d-none" id="clone">
  <div class="mt-2"></div>
  <div class="col-md-8">
    <select class="form-select gg test-select" data-counter="" name="test[]" aria-label="Default select example">
      <option selected>Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <div class="col-md-4">
    <button type="button" class="btn btn-primary add-btn">Add</button>
  </div>
</div>
</body>
</html>

Answer 2

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
   <script> 
    $("#educationType").change(function(){ 
        if($(this).val() && !$(this).find('option:selected').attr("data-clicked")){
            $(this).find('option:selected').attr("data-clicked","true")
        }else if($(this).find('option:selected').attr("data-clicked")){ 
           alert(`"${$(this).val().toUpperCase()}" can be chosen only one time`);
            $(this).val("")
        }
    }) 
</script>

如何使用 html 和 javascript 验证动态 select DropDown？

How to validate dynamic select DropDown using html and javascript?

html

javascript

validation

jquery