javascript - 如何使用新的传入值验证输入框（存在于 Div 容器中）值？

Question

我有两个具有多个作为属性的下拉菜单，如果我选择第一个下拉菜单，那么我将附加input type checkbox到带有所选行的第二个下拉菜单。但是如果我选择第一行并再次取消选择，我会在第二个框中得到重复的选项。

这是我的代码片段

$('.search-box').on("change", function(e) {
                
                  var inputVal1 = $(this).val();

 $('#checkboxes input:checked').each(function() {

  $("#txtSelectedVal").val($("#txtSelectedVal").val()+ $(this).attr('value')+ ", ");
                    
                });
                  
                  var inputVal = (inputVal1) == null ? 0 : inputVal1;
                    if (inputVal.length) {
                      
                    $.get("sub_category.php", {term: inputVal}).done(function(data) {

                      var lclObj = JSON.parse(data);

                      // $('#checkboxes').empty();

                       for(var i = 0; i < lclObj.length; i++) {
                        var lclSubCat = lclObj[i].sub_category1;
                          $('#checkboxes').append("<input type='checkbox' id='chkBox' value="+lclSubCat+">"+lclSubCat+"<br>");

                        }
 $("#checkboxes :checkbox").each(function() {

                              var subCat = 
                 $(".txtSelectedValuesSubFromCategory1").html();

                      var array = subCat.split(",");

                        $.each(array,function(i) {
                                   
                         
        $("input[type=checkbox[value='"+array[i]+"']").prop('checked',true);
                                  
                                  
                                });
                            });

                  });
                  }
                });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-sm-6">
  <label class="control-label">Category:*</label><br>

  <select class="form-control search-box" id="selCategory" 
name="selCategory" multiple style="width: 300px;">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

 <div class="multiselect col-sm-6">
  <label>Sub Category:</label>
  <div class="selectBox form-group">
    <select class="form-control">
      <option value="">Select an option</option>
    </select>
    <div class="overSelect"></div>
  </div>
  <div id="checkboxes">

  </div>
</div>

我不想在第二个下拉菜单中显示重复值。我不想使用 empty() 方法，因为我想保留以前选择的复选框。

标签： javascriptjquery

Answer 1

下面是一个如何完成的小例子。

有一些步骤：

• 声明一个数组变量，每次单击复选框时都会更新（checkedCheckboxes此处）。
• 当下拉列表的值更改时执行 AJAX 调用。
• 当 AJAX 结束时，您就获得了类别。删除所有现有的复选框，然后通过循环为每个类别创建一个新的复选框。不要忘记检查是否checkedCheckboxes包含当前循环的类别以在需要时重新检查它。
• 将事件侦听器添加到这些将更新的复选框checkedCheckboxes。

// Here's the variable that keep the checked checkboxes.
let checkedCheckboxes = [];

$('#multiple').on('change', function() {
  const values = $(this).val();
  
  // Simulates your AJAX call.
  let categories = [];
    
  values.forEach((value) => {
    // Avoids to make another loop and to push at each iteration.
    categories = [].concat(categories, getCategories(value));
  });
  // ^^^ Simulating your AJAX call finished.
  
  // Empties the checkbox container.
  $('#checkboxes').empty();
  
  // For each got categories...
  categories.forEach((cat) => {
    // Creates a checkbox <input>.
    const checkbox = $('<input>')
        .attr('type', 'checkbox')
        .val(cat);
        
    // If that category was already checked,
    // then check it again.
    if (checkedCheckboxes.includes(cat)) {
      checkbox.prop('checked', true);
    }
        
    // On click on a checkbox...
    checkbox.on('change', handleOnClickCheckbox);
  
    // Appends the checkbox to DOM.
    $('#checkboxes').append(checkbox, cat);
  });
});

// Adds or removes from the concerned variable which checkboxes
// is or isn't checked.
function handleOnClickCheckbox() {
  const value = $(this).val(),
    isChecked = $(this).is(':checked');

  // Keep in memory that that checkbox was checked.
  if (isChecked && !checkedCheckboxes.includes(value)) {
    checkedCheckboxes.push(value);
  } // Removes that checkbox if we are unchecking it.
  else if (!isChecked && checkedCheckboxes.includes(value)) {
    checkedCheckboxes.splice(checkedCheckboxes.indexOf(value), 1);
  }
}

// Simulates ajax.
function getCategories(id) {
  const cats = {
    '1': ['1-A', '1-B'],
    '2': ['2-A'],
    '3': ['3-A', '3-B', '3-C']
  };
  
  return cats[id];
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="multiple" multiple>
  <option value="1">Cat 1</option>
  <option value="2">Cat 2</option>
  <option value="3">Cat 3</option>
</select>

<div id="checkboxes"></div>

---

在这里，您的代码片段按照我之前所说的步骤进行操作：

// Here's the variable that keep the checked checkboxes.
let checkedCheckboxes = [];

$('.search-box').on('change', function (e) {
    // "VAL = A || B" syntax is the same as:
    // "VAL = (!VAL) ? 0 : VAL"
    const inputVal = $(this).val() || 0;

    if (inputVal.length > 0) {
        $
            .get("sub_category.php", {term: inputVal})
            .done(function (data) {
                const lclObj = JSON.parse(data);

                $('#checkboxes').empty();

                for (let item of lclObj) {
                    const cat = item.sub_category1,
                        jLabel = $(`<label><input type='checkbox' value=${cat}>${cat}</label>`),
                        jCheckbox = jLabel.find('input');

                    // If that category was already checked,
                    // then check it again.
                    if (checkedCheckboxes.includes(cat)) {
                        jCheckbox.prop('checked', true);
                    }

                    // On click on a checkbox...
                    jCheckbox.on('change', handleOnClickCheckbox);

                    // Appends the label (containing the checkbox) to DOM.
                    $('#checkboxes').append(jLabel);
                }
            });
    }
});

// Adds or removes from the concerned variable which checkboxes
// is or isn't checked.
function handleOnClickCheckbox() {
    const value = $(this).val(),
        isChecked = $(this).is(':checked');

    // Keep in memory that that checkbox was checked.
    if (isChecked && !checkedCheckboxes.includes(value)) {
        checkedCheckboxes.push(value);
    } // Removes that checkbox if we are unchecking it.
    else if (!isChecked && checkedCheckboxes.includes(value)) {
        checkedCheckboxes.splice(checkedCheckboxes.indexOf(value), 1);
    }
}