javascript - 如何使用 jquery 检测选项取消选择？

Question

我有一个选项列表。在列表中选择一个选项时，我创建了新的元素并将它们附加到另一个 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>

脚本

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

这完美地工作并显示在下面的 fiddle 中，但我不知道如何检测列表中的选项是否已被取消选择，以便我可以删除与该选项对应的插入元素？

Fiddle

编辑:

如果是uncelar，这是一个多选列表

Answer 1

1. 您忘记关闭选择标签。
2. 在追加之前清除 html 应该有助于“取消选择”不再选择的那些。
3. 还有一个 jQuery each loop 来遍历选定的元素。
4. 如果您不想选择任何内容，我添加了一个按钮来清除所选项目。不过，我相信你能想出更聪明的办法。

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>

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

这是一个 fiddle 。

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

希望这对您有所帮助。