How to detect option deselect with jquery?

Question

I have a list of options. When selectting an option in the list I create new elemets and append them to another div.

HTML:

<select multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<div class="tankListProduct">
  // things get appended here
</div>

Script

$(function(){

    $("#SelectedProduktValues")
        .on("change", function(e) {
            var optionValueArray = $(this).val();
            var optionValue = optionValueArray[optionValueArray.length-1];
            var optionText = $("#SelectedProduktValues option[value='" + optionValue + "']").text();

            var $options = $("#SelectedTanksValues > option").clone();

            var div = "<div class='col-xs-20 adminRow'>";
            div += "<p class='col-xs-20 text-center'>" + optionText + "</p>";
            div += "<select class='form-control tankList'</select>";
            div += "</div>";

            $(".tankListProduct").append(div);

            $('.tankList').last().selectpicker();
        });
})

This works perfectly and is shown in the fiddle below but I can't figre out how I can detect if an option in the list has been deselected so that I can remove the inserted element that corresponds to that option?

Fiddle

EDIT:

If it was uncelar, this is a multiSelect list

do `$(".tankListProduct").html(div);` instead of `$(".tankListProduct").append(div);` — Aᴍɪʀ, Nov 15 '16 at 20:59
Your select can only select a single element at a time... Are you asking how to know what the previously selected element was? — Juan Mendes, Nov 15 '16 at 21:00
@epascarello that is not an option. I am inserting new selectlists where elements in those lists need to be selected so rebuildning is not an option since i would have troubles maintaining it, what if the user choses something in the new lst and I rebuild it — ThunD3eR, Nov 15 '16 at 21:00
@Ra3IDeN so add all of them and hide/show them based on the selection. — Aᴍɪʀ, Nov 15 '16 at 21:02
@Aᴍɪʀ That is an option that I have considered but it feels dirty and I thought that there was an event that I can listen for when an option was deselected — ThunD3eR, Nov 15 '16 at 21:05
This sounds like basically what is described here: http://stackoverflow.com/questions/4076770/getting-value-of-select-dropdown-before-change — alex shev, Nov 15 '16 at 21:14
To know what was deselected you have to remember what the previous selection and compare it to the current selection. You get the selection from `e.target.selectedOptions` — Juan Mendes, Nov 15 '16 at 21:16

Almond · Accepted Answer · 2016-11-15T22:34:41.217

You forgot to close the select tag.
Clearing the html before you append should help "deselect" the no longer selected ones.
And a jQuery each loop to loop over the selected elements.
I've added a button to clear the selected items, if you dont want anything selected. I'm sure you can come up with something more clever though.

HTML

<select id="SelectedProduktValues" multiple="multiple">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div class="clearList"> Click to clear selction </div>

<div class="tankListProduct">

</div>

Javscript/JQuery

$(function() {

  $("#SelectedProduktValues")
    .on("change",
      function(e) {

        var optionValueArray = $(this).val();


        var div = '';
        $.each(optionValueArray, function(key, value) {
          var optionValue = value;
          var optionText = $("#SelectedProduktValues option[value='" + optionValue + "']").text();

          div += "<div class='col-xs-20 adminRow'>";
          div += "<p class='col-xs-20 text-center'>" + optionText + "</p>";
          div += "<select class='form-control tankList'> </select>";
          div += "</div>";
        });

        $(".tankListProduct").html('');
        $(".tankListProduct").append(div);

        $('.tankList').last().selectpicker();

      });
})

$(".clearList").on("click", function(e) {
  $(".tankListProduct").html('');
});

And here's a fiddle.

https://jsfiddle.net/uhnkwx1g/8/

Hope this helps.

That's what multi-selects inherently are. You can't select "nothing" once you've selected something. You can add a button to clear it, or come up with a more clever alternative yourself. I've added the "clear" button to my Fiddle. — Almond, Nov 15 '16 at 22:31
not entierly true, I could not get my selectpicker to work in the fiddle but if it did I could get a selectlist without any selected options — ThunD3eR, Nov 15 '16 at 22:31
I edited your answer with a null check and now it works, thanks — ThunD3eR, Nov 15 '16 at 22:33

Geeky · Answer 2 · 2016-11-15T21:51:52.277

on onchange event you can just clearout the existing html and add new contents of the selected option

check this snippet

$(function() {

  $("#SelectedProduktValues")
    .on("change", function(e) {
      var optionValueArray = $(this).val();
      var optionValue = optionValueArray[optionValueArray.length - 1];
      var options = $("#SelectedProduktValues").find('option');
      var element = $(".tankListProduct");
      var elem = $(element[0]);

      options.each(function(option) {
        var isSelected = $(options[option]).prop('selected');
        var optionText = $(options[option]).text();
        var child = "div#" + optionText;
        if (isSelected) {

          var $options = $("#SelectedTanksValues > option").clone();
          if (elem.find(child).length == 0) {

            var div = "<div class='col-xs-20 adminRow' id='" + optionText + "'>";
            div += "<p class='col-xs-20 text-center'>" + optionText + "</p>";
            div += "<select class='form-control tankList'</select>";
            div += "</div>";

            $(".tankListProduct").append(div);
          }
        } else {
          $(".tankListProduct").find("div#" + optionText).remove();
        }
      })

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="SelectedProduktValues" multiple="multiple">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<div class="tankListProduct">
  // things get appended here
</div>

Hope it helps

Modified the code ...check and let me know if this is what you are looking for — Geeky, Nov 15 '16 at 21:52

How to detect option deselect with jquery?

2 Answers2