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

编辑：

如果是uncelar，这是一个multiSelect列表

Answer 1

on onchange事件您可以清除现有的html并添加所选选项的新内容

检查此代码段

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助

Answer 2

您忘了关闭选择标记。
在追加之前清除html应该有助于＆＃34;取消选择＆＃34;不再选择了。
每个循环都会循环遍历选定的元素。
如果您不想要任何选择，我已添加了清除所选项目的按钮。我确定你能想出更聪明的东西。

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

这是一个小提琴。

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

希望这有帮助。

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

2 个答案: