CODEWITHSUNDEEP
htmljquerycssdrop-down-menubootstrap-select
Innocent
Innocent

Reputation: 21

How to select and append div to another on select

Please I need help with this. Here is what I want to achieve. On select of the select option, each select option on select will append a div out and on select of the same div, it will hide back. And the name of the select value or option will show by the side which is the left side 2column div is defined on each append To. Here is my code sample DEMO jsfiddle

Here is my HTML CODE.

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

HERE IS MY CSS CODE. Here I have set the div to display none so that on select it will show and on deselect hide.

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

#attribute_show {
  display: non;
}

HERE IS JQUERY CODE. I have set the jQuery bootstrap-select code here, and the jQuery code for the select option

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

I have been working on this, I will really appreciate it if this is gotten rightly thank you for helping out. Please if you don't understand my code do well to refer to this link https://jsfiddle.net/innodigita/9Lcq40su/60/ to be more clear

Upvotes: 1

Views: 2583

Answers (1)

fatin amirah
fatin amirah

Reputation: 111

I have made some amendment to your code. I'm not sure if this is what you wanted based on your requirements. Below is the attached fiddle you can refer 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();
    }
  })
}
});

I have put some explanation inside the fiddle for better understanding. Feel free to comment/edit if you find mistakes or bugs. I believe others might have a better or other ways of doing it.

Upvotes: 1

Related Questions