用jQuery实现可输入多选下拉组合框实例代码

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;

 }

 最爱的水果

  选择

    苹果

    梨

    橘子

    确定

$('.isSelected input[type=checkbox]').on('click',function(){

   varselectedItems = $(this).parents('.dropDown-menu').prevAll('.selectedContent').val().split(' ');

   varthisItem = $(this).parent().prev().text();

   varisExisted = 0;

   varisChecked = $(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')

  });