Using jQuery to realize the example code of multi choice drop down combo box

A lot of plugins are used on the site, such as bootstrap-select plugins that rely on bootstrap. Although these frameworks can implement many functions, because only one of them may be used in actual projects, if 1 is introduced, the whole js loading will be too heavy. For example, the bootstrap-select plug-in mentioned earlier has reached more than 300 k without compression. Therefore, in order to achieve a drop-down box that can be filled out, it is not worth the candle.

For this reason, I wrote a relatively simple multi-choice drop-down combo box with jquery in private. 　　

 container{
   margin: 20px auto;
   padding:0 15px;
   width: 50%; 
   height:300px;
   box-sizing: border-box;  
  }
  .text-container{
   display: inline-block;
   float:left;
   width: 15%;
   height: 32px;
   line-height: 32px;
   box-sizing: border-box;
  }
  .selectContainer{
   width: 70%;
   height:200px;
   float:left;
   position: relative;
   padding:0;
   margin:0;
   box-sizing: border-box;
  }
  .selectedContent{
   width:85%;
   height: 25px;
   float:left;   
  }
  .dropDown-toggle{
   width:14%;
   height:31px;
   line-height: 31px;
   text-align: center;
   border: 1px solid silver;
   border-left:none;
   float:left;
   padding:0;
   margin:0;
   box-sizing: border-box;
   cursor: pointer;
  }
  .dropDown-menu{
   margin:0;
   padding:0 15px 10px;
   width:100%;
   border:1px solid silver;
   border-top: none;
   box-sizing: border-box;
   list-style: none;
   position: absolute;
   top:31px;
   right:0;
  }
  .items{
   margin-top:8px;
   padding: 2px;
   cursor: pointer;
  }
  .items:hover{
   background: #ddd;
  }
  .isSelectedText{
   display: inline-block;
   width:90%;
  }
  .dsn{
   display: none;
  }

<div class="container">
 <span class="text-container"> Favorite fruit </span>
 <div class="multipleSelect selectContainer">
  <input type="text" class="selectedContent">
  <div class="dropDown-toggle"> Select </div>
  <ul class="dropDown-menu dsn">
   <li class="items">
    <span class="isSelectedText"> Apple </span>
    <span class="isSelected"><input type="checkbox"></span>
   </li>
   <li class="items">     
    <span class="isSelectedText"> Pear </span>
    <span class="isSelected"><input type="checkbox"></span>
   </li>
   <li class="items">
    <span class="isSelectedText"> Orange </span>
    <span class="isSelected"><input type="checkbox"></span>
   </li>
   <li style="text-align: right">
    <button type="button" class="confirmSelect"> Determine </button>
   </li>
  </ul>
 </div>
</div>

$('.isSelected input[type=checkbox]').on('click', function(){
   var selectedItems = $(this).parents('.dropDown-menu').prevAll('.selectedContent').val().split(' ');
   var thisItem = $(this).parent().prev().text();
   var isExisted = 0;
   var isChecked = $(this).is(':checked');
   if(isChecked){
    selectedItems.map(function(item, index){
     if(item === thisItem){
      isExisted++
     }
    });
    if(!isExisted){
     selectedItems.push(thisItem)
    }
   }
   else{
    selectedItems.map(function(item, index){
     if(item === thisItem){
      selectedItems.splice(index, 1);
     }
    });
   }
   $(this).parents('.dropDown-menu').prevAll('.selectedContent').val(selectedItems.join(' '));
  })
  $('.confirmSelect').on('click', function(){
   $(this).parents('.dropDown-menu').addClass('dsn');
  })
  $('.dropDown-toggle').on('click', function(){
   $(this).next().toggleClass('dsn')
  });

Because the map method of arrays is used in this component, this method may not be compatible in ie. Because my computer ie can't be opened, it can also be used normally after testing with 360 browser.