获得每个功能结果显示分开

Question

我有一个div，它作为选择的着陆点，有点像自定义选择输入。如果单击“进行选择”，则会出现一个菜单。然后您的选择（一个或多个项目）将出现在该div中。

我有两个问题，我无法弄清楚。

1. 如何让每个选项显示包裹在.drop-item-selected中，以便选择看起来像单个框。 （现在div包含所有选择选项，如果选择了多个选项）。
2. 如果从下拉列表中检查.drop-item-inputs，如何删除它们。注释掉的javascript是我尝试过的，但这只是删除了整个列表。

有人有主意吗？

对于＃1，我希望将这些框分别包装在div中，所以它们看起来像这样：

Here is a jsfiddle.

$('#proposal-type').click(function() {
  $('#proposal-type-drop').addClass('active');
});
$('.drop-item-input').on('change', function() {
  var proposalVal = "";
  $('.drop-item-input').each(function() {
    if ($(this).is(":checked")) {
      proposalVal += $(this).val();
      //$(this).fadeOut();
    };
    /*if ($('.drop-item-input').is(':checked')) {
    	$('.drop-item').fadeOut();
    }*/
    $('#proposal-type').val(proposalVal).html("<div class='drop-item-selected'>" + proposalVal + "</div>");
    $('#proposal-type-drop').removeClass('active');
  });
});

#proposal-type-drop {
  width: 45%;
  display: none;
  position: absolute;
}

#proposal-type-drop.active {
  background: rgba(0, 0, 0, 1);
  display: block;
  height: auto;
  z-index: 1;
}

[contentEditable=true]:empty:not(:focus):before {
  content: attr(data-text)
}

.drop-item {
  color: #FFF;
  font-size: .9rem;
  padding: 5px;
  background: #000;
  display: block;
  width: 100%;
  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" contentEditable=true name="proposal_type" class="proposal-input" data-text="Make Selection"></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

对于你要求的，只需：

$('#proposal-type').click(function() {
    $('#proposal-type-drop').addClass('active');
});
$('.drop-item-input').on('change', function() {
    var proposalVal = "";
    var proposalHtml = "";
    $('.drop-item-input').each(function() {
        if ($(this).is(":checked")) {
            proposalVal += $(this).val();
            proposalHtml += '<span class="drop-item-selected">' + $(this).val() + '</span>';
            $(this).closest('label').fadeOut();
        };
        $('#proposal-type').val(proposalVal).html(proposalHtml);
        $('#proposal-type-drop').removeClass('active');
    });
});

#proposal-type-drop {
    width: 45%;
    display: none;
    position: absolute;
}

#proposal-type-drop.active {
    background: rgba(0, 0, 0, 1);
    display: block;
    height: auto;
    z-index: 1;
}

[contentEditable=true]:empty:not(:focus):before {
    content: attr(data-text)
}

.drop-item {
    color: #FFF;
    font-size: .9rem;
    padding: 5px;
    background: #000;
    display: block;
    width: 100%;
    cursor: pointer;
}

.drop-item-input {
    display: none;
}

.drop-item-selected {
    display: inline-block;
    background: blue;
    padding: 5px;
    font-size: .9rem;
    width: auto;
    display: inline-block;
    margin: 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/2.1.1/jquery.min.js"></script>
<div id="proposal-type" contentEditable=true name="proposal_type" class="proposal-input" data-text="Make Selection"></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>

也在JSFiddle。

Answer 2

   

 

    $('#proposal-type').click(function() {
          $('#proposal-type-drop').addClass('active');
        });
        $('.drop-item-input').on('change', function() {
          var proposalVal = "";
    
            if ($(this).is(":checked")) {
              proposalVal += $(this).val();
    $('#proposal-type').append("<div class='drop-item-selected'>" + proposalVal + "</div>&nbsp;");
            $('#proposal-type-drop').removeClass('active');
 $(this).closest('label').fadeOut();
            }
            /*if ($('.drop-item-input').is(':checked')) {
            	$('.drop-item').fadeOut();
            }*/
        
         
        });

#proposal-type-drop {
  width: 45%;
  display: none;
  position: absolute;
}

#proposal-type-drop.active {
  background: rgba(0, 0, 0, 1);
  display: block;
  height: auto;
  z-index: 1;
}

[contentEditable=true]:empty:not(:focus):before {
  content: attr(data-text)
}

.drop-item {
  color: #FFF;
  font-size: .9rem;
  padding: 5px;
  background: #000;
  display: block;
  width: 100%;
  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" contentEditable=true name="proposal_type" class="proposal-input" data-text="Make Selection"></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>