如何在选择时选择div并将其附加到另一个div

Question

我需要这方面的帮助。这是我想要实现的目标。在选择 选择选项，选择上的每个选择选项都会追加一个 div，并且在选择同一个 div 时，它会隐藏起来。并且选择值或选项的名称将显示在左侧 2column div 在每个附加到上定义。这是我的代码示例 DEMO jsfiddle

这是我的 HTML 代码。

 <div class="container">
  <div class="row col-md-10">
    <div class="col-md-2">
      <div class="input-group-prepend float-right">
        <label class="font-weight-bold input-group-text" for="Attributes">Attributes</label>
      </div>
    </div>
    <div class="select-input col-md-8">
      <select class="my-select w-100 selectpicker" multiple data-live-search="true" data-actions-box="true" multiple data-selected-text-format="count > 3" id="attribute_select">
        <option disabled>Nothing Selected</option>
        <option value="size"> Size </option>
        <option value="fabric"> Fabric </option>
        <option value="Shoe"> Shoes </option>
        <option value="boys"> Boys </option>
      </select>
    </div>
  </div>

  <div class="col-md-8 p-3">
    <small>Choose the attributes of this product and then input values of each attribute</small>
  </div>

  <div>
    <div class="row col-md-10" id="attribute_show">
      <div class="col-md-2">
        <div class="input-group-prepend float-right">
          <label class="font-weight-bold input-group-text " for="Attributes"><span class="change-me">Items</span></label>
        </div>
      </div>
      <div class="select-input col-md-8">
        <select class="my-select w-100 selectpicker" multiple data-live-search="true" multiple data-selected-text-format="count > 3">
          <option value="0" selected>Nothing Selected</option>
          <option value="1"> XXL </option>
          <option value="2"> XL </option>
          <option value="3">S</option>
        </select>
      </div>
    </div>
  </div>

  <div id="attribute_append"></div>

</div>

这是我的 CSS 代码。在这里，我将 div 设置为不显示，以便在选择时显示，在取消选择时隐藏。

.select-input button {
  background-color: #aa1876 !important;
  color: #fff !important;
  padding: 10px 20px;
}

#attribute_show {
  display: non;
}

这里是 JQUERY 代码。我在这里设置了 jQuery bootstrap-select 代码，以及 select 选项的 jQuery 代码

$(document).ready(function() {
    
      $(function() {
        $(".my-select").selectpicker();
      });
    
    //SELECT CODE
    
      $("#attribute_select").on("change", function() {
        var attrName = $("#attribute_select").val();
        var attriValue = `<label class="font-weight-bold input-group-text" for="Attributes">${attrName}</label>`;
    
        $("#attribute_show").clone().appendTo("#attribute_append");
        $(".change-me").replaceWith(attriValue);
        $("#attribute_show").show();
    
      });
      
      
    });

我一直在努力，如果得到正确的帮助，我将不胜感激。感谢您的帮助。如果您不理解我的代码，请参考此链接https://jsfiddle.net/innodigita/9Lcq40su/60/ 更清楚

Answer 1

我对您的代码做了一些修改。根据您的要求，我不确定这是否是您想要的。以下是您可以参考的附加小提琴 example

JS

$("#attribute_select").on('changed.bs.select', function(e, clickedIndex, 
isSelected, previousValue) {

var selectedD = $(this).find('option').eq(clickedIndex).text();

if (isSelected) {
  var el = $("#attribute_show").clone();
  var newAttr = '#attribute_show' + count; 
  var html = $(el).appendTo("#attribute_append");
  $(html).removeAttr('id').attr('id', newAttr); // give the cloned div a new ID
  $(html).find(".change-me").text(selectedD);
  count++;
        $(html).find('select.my-select1').selectpicker(); //I have give a new class to 
  //the second selectpicker so that it will not initialize for the first time. It will be initialized after it is cloned.
        
  } else {
  var selectedItems = $(this).val(); //array of selected items from selectpicker

        //check if each cloned item exist in the selectedItems array, if not exist, remove the div
  $('#attribute_append').find('span.change-me').each(function(i, e) {
    //var item = $.trim($(e).text().toLowerCase());
      var item = $(e).text().toLowerCase().trim();
    if (jQuery.inArray(item, selectedItems) == -1) {
      $(e).parent().parent().parent().parent().remove();
    }
  })
}
});

为了更好地理解，我在小提琴中做了一些解释。如果您发现错误或错误，请随时评论/编辑。我相信其他人可能有更好的或其他方式来做到这一点。