当我更改选择框时，jQuery 删除 div

Question

我想做的是:

如果我选中或选择了项目 1 和项目 2，则在用户选择下面的下拉列表后需要删除上面的 div。 (需要删除两者，无论用户是否选择:删除 1 以上的 div 或删除 2 以上的 div)

这是我的jsfiddle:http://jsfiddle.net/b9jbatfv/4/

我希望我的问题很清楚

我在这里做的最多的是这个，我无法继续。 :(

//click
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  var id = $(this).closest('[id]').attr('id');
  $('.show-content #' + id).toggle($(this).is(':checked'));

  if ($(this).is(':checked')) {
    $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }

  $("span").bind("click", function() {
    $(this).remove();
    var selectedText = $(this).attr('selected-item');
    selectedText = selectedText.split('_');
    $('li#' + selectedText[0]).find('input').prop('checked', false);
  });
});
//click

//grid
var $select = $('.js-my-select'),
  $images = $('.js-my-image');

$select.on('change', function() {
  var value = '.' + $(this).val();
  $images.show().not(value).hide();
});
//end search

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="bills">item 1</label>
      <span for="bills" class="pull-right">()</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="bills">item 2</label>
      <span for="bills" class="pull-right">()</span>
    </li>
  </ul>
</div>

<div class="show-content">
  <div style="margin-bottom: 30px;  height: 50px; display:none;" id="item1"> Grid item 1</div>
  <div style="margin-bottom: 30px;  height: 50px; display:none;" id="item2"> Grid item 2</div>
</div>

<h1>explanation:</h1>
<p>
if I the the item 1 and item 2 are checked or selected  the divs above needs to be removed after the user select the dropdown bellow. (need remove both, does not matter if the user selected: theremove div above 1 or remove div above 2)
</p>

<select id="selectbasic" name="my-select" class="js-my-select form-control">
  <option value="nothing" selected>Select</option>
  <option value="grid">remove div above 1.</option>
  <option value="expanded">reomve div above 2</option>
</select>

<!--  expanded style for select -->

<div class="js-my-image grid" style="display: none;">
  divs above were removed and here is the message 1
</div>

<div class="js-my-image expanded" style="display: none;">
 div above were removed and here is the message 2
</div>

Answer 1

这里有一个解决方案 http://jsfiddle.net/b9jbatfv/8/

//click
var increment2 = 1;
$('input[type=checkbox]').on('click', function() {
  var $li = $(this).parent('li').get(0);
  var id = $(this).closest('[id]').attr('id');
  $('.show-content #' + id).toggle($(this).is(':checked'));

  if ($(this).is(':checked')) {
    $('#selected_items').append('<span class="label label-primary" selected-item="' + $li.id + '_selected">' + $($li).find('label').text() + '</span>');
  } else {
    $('#selected_items > span[selected-item^="' + $li.id + '"]').remove();
  }

  $("span").bind("click", function() {
    $(this).remove();
    var selectedText = $(this).attr('selected-item');
    selectedText = selectedText.split('_');
    $('li#' + selectedText[0]).find('input').prop('checked', false);
  });
});
//click

//grid
var $select = $('.js-my-select'),
  $images = $('.js-my-image');

$select.on('change', function() {
  var value = '.' + $(this).val();
  $images.show().not(value).hide();
  var checkedAll = true;
  $('.bill-type li').each(function(){
  	    if(!$(this).find('input[type="checkbox"]').is(':checked'))
	  checkedAll = false;
  });
  if(checkedAll)
  	    $('.bill-type').slideUp();
});
//end search

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <ul class="bill-type">
    <li id="item1">
      <input type="checkbox" />
      <label for="bills">item 1</label>
      <span for="bills" class="pull-right">()</span>
    </li>
    <li id="item2">
      <input type="checkbox" />
      <label for="bills">item 2</label>
      <span for="bills" class="pull-right">()</span>
    </li>
  </ul>
</div>

<div class="show-content">
  <div style="margin-bottom: 30px;  height: 50px; display:none;" id="item1"> Grid item 1</div>
  <div style="margin-bottom: 30px;  height: 50px; display:none;" id="item2"> Grid item 2</div>
</div>

<h1>explanation:</h1>
<p>
if I the the item 1 and item 2 are checked or selected  the divs above needs to be removed after the user select the dropdown bellow. (need remove both, does not matter if the user selected: theremove div above 1 or remove div above 2)
</p>

<select id="selectbasic" name="my-select" class="js-my-select form-control">
  <option value="nothing" selected>Select</option>
  <option value="grid">remove div above 1.</option>
  <option value="expanded">reomve div above 2</option>
</select>

<!--  expanded style for select -->

<div class="js-my-image grid" style="display: none;">
  divs above were removed and here is the message 1
</div>

<div class="js-my-image expanded" style="display: none;">
 div above were removed and here is the message 2
</div>

添加了jQuery .slideUp方法来隐藏ul并且slideUp仅在选中ywo复选框时才会发生。

$('.bill-type').slideUp();

希望这对您有帮助。