时间戳

首页 > 解决方案 > 如何从 jquery 的 Select 元素中的选定选项中删除复选框元素

jquery - 如何从 jquery 的 Select 元素中的选定选项中删除复选框元素

问题描述

当在 SELECT 元素中单击文本或值相同的选择选项时，我试图删除复选框元素。For example, when option value College GWA is selected, the equivalent CheckBox labeled College GWA should be removed.

选择元素：

 <select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option

复选框元素：

 <div id="div_id_features" class="form-group">
   <label for="" class=""> Feature </label>
     <div class="">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA" >
            <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>
        
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study" >
            <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>
        
        </div>
   
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre" >
          <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>       
         </div>

jQuery代码：

   $("select.target_column").change(function(){
        var selected_col = $(this).children("option:selected").val();

        $("input[name='feature_manual']:contains".join(selected_col)).remove();
    });

标签： jquery

解决方案

使用filter()since:contains()仅适用于文本内容，不适用于表单控件值。

或者，您可以使用循环遍历所有复选框each

$('#id_target_column').change(function() {
  var selVal = $(this).val()
  $("input[name='feature_manual']").filter(function() {
    var checkVal = this.value;
    return checkVal === selVal;
  }).parent().remove()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="target_column" class="select form-control" id="id_target_column">
  <option value="College GWA">College GWA</option>
  <option value="Field Study">Field Study</option>
  <option value="Compre">Compre</option>

</select>
<div id="div_id_features" class="form-group">
  <label for="" class=""> Feature </label>
  <div class="">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_1" value="College GWA">
      <label class="form-check-label" for="id_feature_manual_1">
             College GWA
            </label>

    </div>
    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_2" value="Field Study">
      <label class="form-check-label" for="id_feature_manual_2">
              Field Study
            </label>

    </div>

    <div class="form-check">
      <input type="checkbox" class="form-check-input" name="feature_manual" id="id_feature_manual_3" value="Compre">
      <label class="form-check-label" for="id_feature_manual_3">
            Compre
          </label>
    </div>

推荐阅读