文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用html和javascript验证动态选择DropDown？

问如何使用html和javascript验证动态选择DropDown？
EN

Stack Overflow用户

提问于 2022-03-15 05:35:53

回答 2查看 206关注 0票数 0

我有一份有教育细节的表格，其中有一个下拉列表，它提供了4个选项。

学校教育
毕业
毕业后
其他

现在我要做的是允许用户填写这些细节，但我想要的是用户不能选择一次以上的教育类型，这意味着用户可以选择一次学校教育，毕业一次等等，而我想要的客户端验证是js/jquery。

图像可供参考

    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>

这是我选择的下拉列表，我想要验证，所以任何提示或验证提示都会非常有用，谢谢!！

javascript

html

jquery

validation

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-03-15 08:00:59

英语不是我的主要语言，但我会尽力解释。给所有要检查的选择提供相同的类，然后在更改函数循环中使用给定的类遍历所有元素，如果使用表单中继器，则比较元素的名称，以避免与相同的元素进行比较。如果不使用表单中继器添加“数据计数器”元素，则在每次新添加时增加其值，

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

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>

票数 0

Stack Overflow用户

发布于 2022-03-15 09:06:27

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71477516

复制

相似问题

问如何使用html和javascript验证动态选择DropDown？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用html和javascript验证动态选择DropDown？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用html和javascript验证动态选择DropDown？
EN