將div與複選框關聯，然後將值設置爲false

Question

我有一個自定義的下拉菜單，其中.is(":checked")用於填充div。 div填充正確，但我無法確定如何在單擊/ close圖標時刪除div中的選擇。

我覺得我有麻煩的原因是因爲div只填充輸入值。我不確定如何從提案類型div中刪除此值，然後在單擊x圖標時刪除該項目以重新填充刪除列表。所以基本上，與填充它完全相反。

有沒有人看到我要做什麼來刪除投標類型div中的值，單擊drop-item-selected div的x-icon，然後如何在下拉菜單中再次顯示輸入？

對不起，如果有任何不清楚。如果您需要更清晰的話，請提出任何問題。

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

#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 { 
 
\t display: inline-block; 
 
\t background-image: url("https://www.wpclipart.com/signs_symbol/alphabets_numbers/outlined_alphabet/white_capitol/capitol_X_white.png"); 
 
\t background-size: 10px 10px; 
 
    background-repeat: no-repeat; 
 
\t height: 10px; 
 
\t width: 10px; 
 
\t margin-right: 10px; 
 
\t 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

請參考下面的代碼。希望它有幫助

$('#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" data-attr=' + $(this).val() + '></span>' + $(this).val() + '</div>'; 
      $(this).parent().hide(); 
      //$(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'); 

     bindCloseEvent(); 
    }); 
    //values 
    var type = $('.drop-item-input:checked').map(function() { 
     return $(this).val(); 
    }).get().join(', '); 
    console.log(type); 
}); 

function bindCloseEvent() { 
    $('.drop-item-close').click(function() { 
     debugger; 
     var selectedOption = $(this).attr('data-attr'); 
     var $handler = $('#proposal-type-drop').find('input[value="' + selectedOption + '"]'); 
     $handler.parent().show(); 
     $(this).parent().remove(); 

     if ($('#proposal-type').text() == "") 
      $('#proposal-type').text("Type of Project *"); 

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