根据复选框重置下拉列表，然后单击取消

时间：2018-08-15 03:41:02

标签： javascript jquery html

我的下拉菜单具有以下结构

<select class="load_instrument" id="review_select" onchange="changeReviewField(this)">
  <option value="data2" data-type="child" style="display: block;">a2</option>
  <option value="data3" data-type="child" style="display: block;">b1</option>
  <option value="data4" data-type="child" style="display: block;">b2</option>
  <option value="calculation1" data-type="child" style="display: block;">al_diff_a</option>
  <option value="calculation9" data-type="child" style="display: block;">c_dev_a</option>
  <option value="calculation7" data-type="child" style="display: block;">disp_a</option>
  <option value="calculation14" data-type="child" style="display: block;">bearing</option>
  <option value="calculation13" data-type="child" style="display: block;">res</option>
  <option value="calculation2" data-type="child" style="display: block;">al_diff_b</option>
  <option value="calculation10" data-type="child" style="display: block;">c_dev_b</option>
  <option value="calculation6" data-type="child" style="display: block;">dev_b</option>
  <option value="calculation11" data-type="child" style="display: block;">cd_a</option>
  <option value="calculation12" data-type="child" style="display: block;">cd_b</option>
  <option value="calculation4" data-type="child" style="display: block;">al_sum_b</option>
  <option value="calculation8" data-type="child" style="display: block;">disp_b</option>
  <option value="calculation3" data-type="child" style="display: block;">al_sum_a</option>
  <option value="calculation5" data-type="child" style="display: block;">dev_a</option>
  <option value="m.calculation4" data-type="master" style="display: none;">c_dev_a</option>
  <option value="m.calculation5" data-type="master" style="display: none;">c_dev_b</option>
  <option value="m.calculation6" data-type="master" style="display: none;">cd_a</option>
  <option value="elapsed_time" data-type="master" style="display: none;">Elapsed Time</option>
</select>

并有一个复选框

<input type="checkbox" value="1" name="master_fields" id="master_fields" style="vertical-align: -6px;" >


$("#master_fields").on('click', function() {
  if ($(this).prop("checked") == true) {
    $("#review_select option[data-type='master']").show();
    $("#review_select option[data-type='child']").hide();
  } else {
    $("#review_select option[data-type='master']").hide();
    $("#review_select option[data-type='child']").show();
  }
});

当选中它时，下拉菜单中将显示主元素，而子类型将被隐藏；当取消选中主元素时，将隐藏子元素，并将显示子元素，问题是子选项的第一个元素始终可见，而不是隐藏起来，有人请帮助

2 个答案:

答案 0 :(得分：2)

您的代码可以正常工作，只需使用jQuery CDN导入jQuery。因此，只需将其粘贴到代码顶部

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>

还请确保实际插入复选框

<input id='master_fields' type='checkbox'>

我附上了工作示例。希望能有所帮助：）

let prev_item = 0
$("#master_fields").on('click', function() {
  if ($(this).prop("checked") === true) {
    $("#review_select option[data-type='child']").hide();
    $("#review_select option[data-type='master']").show();
    prev_item = $('#review_select').prop('selectedIndex')
    $('#review_select').prop('selectedIndex', $("option[data-type='child']").length)
  } else {
    $("#review_select option[data-type='master']").hide();
    $("#review_select option[data-type='child']").show();
    $('#review_select').prop('selectedIndex', prev_item);
  }
});
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>

<select class="load_instrument" id="review_select">
  <option value="data2" data-type="child" style="display: block;">a2</option>
  <option value="data3" data-type="child" style="display: block;">b1</option>
  <option value="data4" data-type="child" style="display: block;">b2</option>
  <option value="calculation1" data-type="child" style="display: block;">al_diff_a</option>
  <option value="calculation9" data-type="child" style="display: block;">c_dev_a</option>
  <option value="calculation7" data-type="child" style="display: block;">disp_a</option>
  <option value="calculation14" data-type="child" style="display: block;">bearing</option>
  <option value="calculation13" data-type="child" style="display: block;">res</option>
  <option value="calculation2" data-type="child" style="display: block;">al_diff_b</option>
  <option value="calculation10" data-type="child" style="display: block;">c_dev_b</option>
  <option value="calculation6" data-type="child" style="display: block;">dev_b</option>
  <option value="calculation11" data-type="child" style="display: block;">cd_a</option>
  <option value="calculation12" data-type="child" style="display: block;">cd_b</option>
  <option value="calculation4" data-type="child" style="display: block;">al_sum_b</option>
  <option value="calculation8" data-type="child" style="display: block;">disp_b</option>
  <option value="calculation3" data-type="child" style="display: block;">al_sum_a</option>
  <option value="calculation5" data-type="child" style="display: block;">dev_a</option>
  <option value="m.calculation4" data-type="master" style="display: none;">c_dev_a</option>
  <option value="m.calculation5" data-type="master" style="display: none;">c_dev_b</option>
  <option value="m.calculation6" data-type="master" style="display: none;">cd_a</option>
  <option value="elapsed_time" data-type="master" style="display: none;">Elapsed Time</option>
</select>
<input id='master_fields' type='checkbox'>

答案 1 :(得分：1)

问题是即使隐藏它，默认情况下在下拉菜单中也会选择a2。 您可以为要最初显示的选项设置selected属性。

<option selected data-type="child">a2</option>

在您的代码中

$("#master_fields").on('click', function() {
if ($(this).prop("checked") == true) {
        console.log($("option[data-type='master']").length);
    $("option[data-type='master']").show();
    $('#review_select').prop('selectedIndex',$("option[data-type='child']").length);
    $("#review_select option[data-type='child']").hide();
} else {
    $("#review_select option[data-type='master']").hide();
   $('#review_select').prop('selectedIndex',0);
    $("#review_select option[data-type='child']").show();
}
})

我已根据要求编辑了代码， 使用$("option[data-type='child']").length，查找带有子项的选项数量

相关问题
最新问题