Question

我正在使用 javascript 添加选择字段及其工作正常我想添加验证

<select>
  <option>8mm</option>
  <option>10mm</option>
  <option>12mm</option>
</select>
<select>
  <option>8mm</option>
  <option>10mm</option>
  <option>12mm</option>
</select>
<select>
  <option>8mm</option>
  <option>10mm</option>
  <option>12mm</option>
</select>

如果用户在第一个选择中选择了 8mm，那么其他两个选择标签中的 8mm 将被禁用。

这是添加选择字段的JS代码

var x = 1; //Initial field counter is 1
var maxField = 6; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = `<div>
<span class="w-1/2 mr-2">
    <label for="basicRate">Basic</label>
    <select name="basicRate[]" id="basicRate" onchange="getBasicVal(this);" required>
        <option value="8">8mm</option>
        <option value="10">10mm</option>
        <option value="12">12mm</option>
        <option value="16">16mm</option>
        <option value="20">20mm</option>
        <option value="25">25mm</option>
    </select>
</span>
<span class="w-1/2">
    <label for="">Quantity (in tons)</label>
    <input id="quantity" type="text" name="quantity" placeholder="" required />
</span><a href="javascript:void(0);" class="remove_button" title="Remove">Remove</a>
</div>`; 



//New input field html

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
        x++; //Increment field counter
        $(wrapper).append(fieldHTML); //Add field html
        
    }
});

//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
});

这是用户界面

如您所见，前两个下拉列表具有相同的值 10mm 表示用户可以选择相同的值。我正在寻找简单的验证，如果用户选择某个选项，那么他或她不会在其他下拉列表中选择相同的值。

提前致谢

Answer 1

您可以使用 selected 循环遍历 each 选项，如果匹配 disabled 来自其他选择框的选项，则使用此选定值与其他选项进行比较。

演示代码：

$(document).on("change", ".basicRate", function() {
  $("select option").attr("disabled", false);//remove disable from all
  //loop through all select box(selected option)
  $(".basicRate option:selected").each(function() {
    var value = $(this).val()
    //loop through all option(not selected option) if you don't want to disable selected option .. else just use `.basicRate option`
    $(".basicRate option:not(:selected)").each(function() {
      if ($(this).val() == value) {
        $(this).attr("disabled", true);
      }
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span class="w-1/2 mr-2">
    <label for="basicRate">Basic</label>
    <!--use class-->
    <select name="basicRate[]" class="basicRate"  required>
        <option value="8">8mm</option>
        <option value="10">10mm</option>
        <option value="12">12mm</option>
        <option value="16">16mm</option>
        <option value="20">20mm</option>
        <option value="25">25mm</option>
    </select>
</span>
  <span class="w-1/2">
    <label for="">Quantity (in tons)</label>
    <input id="quantity" type="text" name="quantity" placeholder="" required />
</span><a href="javascript:void(0);" class="remove_button" title="Remove">Remove</a>
</div>
<div>
  <span class="w-1/2 mr-2">
    <label for="basicRate">Basic</label>
    <select name="basicRate[]" class="basicRate"  required>
        <option value="8">8mm</option>
        <option value="10">10mm</option>
        <option value="12">12mm</option>
        <option value="16">16mm</option>
        <option value="20">20mm</option>
        <option value="25">25mm</option>
    </select>
</span>
  <span class="w-1/2">
    <label for="">Quantity (in tons)</label>
    <input id="quantity" type="text" name="quantity" placeholder="" required />
</span><a href="javascript:void(0);" class="remove_button" title="Remove">Remove</a>
</div>
<div>
  <span class="w-1/2 mr-2">
    <label for="basicRate">Basic</label>
    <select name="basicRate[]" class="basicRate"  required>
        <option value="8">8mm</option>
        <option value="10">10mm</option>
        <option value="12">12mm</option>
        <option value="16">16mm</option>
        <option value="20">20mm</option>
        <option value="25">25mm</option>
    </select>
</span>
  <span class="w-1/2">
    <label for="">Quantity (in tons)</label>
    <input id="quantity" type="text" name="quantity" placeholder="" required />
</span><a href="javascript:void(0);" class="remove_button" title="Remove">Remove</a>
</div>

动态添加选择字段和验证

1 个答案: