Associating a div with a checkbox and then setting value to false

Question

I have a custom drop down menu, in which I am using to fill a div with the selections when .is(":checked"). The divs are filling correctly, but I am having trouble figuring out how to remove the selections in the div when the /close icon is clicked.

I think the reason I am having troubles is because the div is only filling with the inputs value. I am unsure of how to remove this value from the proposal-type div and then repopulate the drop list with the item removed, when clicking the x icon. So essentially, exactly the opposite as filling it.

Does anyone see what I have to do to remove the values in the proposal-type div, when clicking the x-icon for the drop-item-selected divs and then how to show the input again in the drop down?

Sorry if any of this is unclear. Please ask any questions if you need more clarity.

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

I think I understand what you are trying to do...basically a search bar where you can select multiple items as filters and when they are clicked they appear in the "filter/search" div? I guess before moving forward my question is - "Why checkboxes?" I can see a method of doing this where you could simple select divs (buttons?) and when they are clicked they are moved and their class changed in order to trigger the reverse effect where they clicked again from within the bar? Am I close? — Luke, May 04 '17 at 19:07
Your ideal is pretty close. It isn't a search bar, though. This is being implemented into a contact form of sorts. I am using inputs so that the value can be sent and so if not selected it will show as unchecked. — Paul, May 04 '17 at 19:09
`$('.drop-item-close').click` won't get triggered by elements you add after the handler is bound. See [here](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements). Quick solution, use `$('#proposal-type-drop').on('click', '.drop-item-close', function () { ... });` — James, May 04 '17 at 19:12
@James Thanks. I changed it, but still not triggering. `$('document').on('click', '.drop-item-close', function () { console.log("Triggered");` — Paul, May 04 '17 at 19:15
You were correct to use `document` rather than `#proposal-type-drop` as the containing element, but it should be `$(document)` (no quotes) - it works for me, although it points to further bugs. — James, May 04 '17 at 19:32
@James Thanks! Not sure how I missed that. Ok, so now the `fadeOut` works when clicking the x, but instead of the "A, B or C" going back into the drop list, the x icon does. — Paul, May 04 '17 at 19:36

score 0 · Answer 1 · answered May 04 '17 at 19:52

Please see below code. Hope it helps

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

Sorry just saw this. Thank you! It works great, except for when you try to add the items to the `#proposal-type` after removing them. If you click on an option it adds more than one. (Sorry hard to explain). — Paul, May 04 '17 at 23:30

Associating a div with a checkbox and then setting value to false

1 Answers1