将div与复选框关联，然后将值设置为false

Question

我有一个自定义下拉菜单，我在.is(":checked")时使用选项填充div。 div正确填充，但是当我点击/关闭图标时，我无法弄清楚如何删除div中的选择。

我认为我遇到麻烦的原因是因为div只填充了输入值。我不确定如何从提案类型div中删除此值，然后在单击x图标时重新填充删除项目的下拉列表。所以基本上恰恰相反，就像填充它一样。

当点击drop-item-selected div的x图标，然后如何在下拉菜单中再次显示输入时，有没有人看到我要删除提案类型div中的值？< / p>

很抱歉，如果其中任何一项不清楚。如果您需要更清晰，请询问任何问题。

$('#proposal-type').text("Type of Project *");
	$('.drop-item-input').on('change', function() {
	  var proposalVal = "";
	  var proposalHtml = "";
	  $('.drop-item-input').each(function() {
		if ($(this).is(":checked")) {
			proposalVal += $(this).val();
			proposalHtml += '<div class="drop-item-selected"><span class="drop-item-close"></span>' + $(this).val() + '</div>';
			$(this).closest('label').fadeOut();
		};
		//else if ($(this).is(":checked") === false) {
		//	$(this).closest('label').fadeIn();
		//};
		$('#proposal-type').val(proposalVal).html(proposalHtml);
		$('#proposal-type-drop').removeClass('active');
	  });
	  //values
	  var type = $('.drop-item-input:checked').map(function() {
		  return $(this).val();
	  }).get().join(', ');
	  console.log(type);
	});
	$('.drop-item-close').click(function () {
		$(this).fadeOut("medium", function() {
			$this.detach().appendTo('#proposal-type-drop').fadeIn();
		});
		$(this).is(":checked") === false;
		$(this).closest('label').fadeIn();
		$(this).closest('.drop-item-selected').fadeOut();
	});

#proposal-type {
  border: 1px solid #858585;
  height: 20px;
}
#proposal-type-drop {
  width: 45%;
  height
  display: none;
  position: absolute;
}
#proposal-type-drop.active {
  background: rgba(0, 0, 0, 1);
  display: block;
  height: auto;
  z-index: 1;
}
.drop-item {
  color: #FFF;
  font-size: .9rem;
  padding: 5px;
  background: #000;
  display: block;
  width: 100%;
  cursor: pointer;
}
.drop-item-close {
	display: inline-block;
	background-image: url("https://www.wpclipart.com/signs_symbol/alphabets_numbers/outlined_alphabet/white_capitol/capitol_X_white.png");
	background-size: 10px 10px;
    background-repeat: no-repeat;
	height: 10px;
	width: 10px;
	margin-right: 10px;
	cursor: pointer;
}
.drop-item-input {
  display: none;
}
.drop-item-selected {
  background: blue;
  padding: 5px;
  font-size: .9rem;
  width: auto;
  display: inline-block;
  margin: 0 3px;
}
.proposal-text {
  width: 95%;
  display: block;
  height: 6em;
  margin: 1.5% 2% 2.5% 2%;
  !important
}
#proposal-check {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="proposal-type" class="proposal-input"></div>
<div id="proposal-type-drop">
  <label class="drop-item">A<input type="checkbox" class="drop-item-input" value="A"></label>
  <label class="drop-item">B<input type="checkbox" class="drop-item-input" value="B"></label>
  <label class="drop-item">C<input type="checkbox" class="drop-item-input" value="C"></label>
</div>

Answer 1

请参阅以下代码。希望它有所帮助

{{1}}