获取每个函数结果以显示分隔

Question

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

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

1. 如何让每个选项显示在.drop-item-selected中，以便选择看起来像个别方框。 （现在div包含所有选择选项，如果选择了多个选项）。

2. 如果从下拉列表中选中.drop-item-inputs，请如何删除$('#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'); }); });。注释掉的javascript就是我尝试过的，但这只是删除了整个列表。

有人有什么想法吗？

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



Here is a jsfiddle.

＆＃13;
＆＃13;
#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;
}
＆＃13;
<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>
＆＃13;
$(".homedepot, .amazon, .walmart").on('click', function(e) {
    e.preventDefault();
    url = $(this).parent().attr('href');
    window.open(url , "_blank");
    trackOutboundLink(url);
});
＆＃13;
＆＃13;
＆＃13;

Answer 1

对于你的要求，只需：

＆＃13;

＆＃13;

$('#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');
    });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

同样在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>