Use jquery to implement multiple-choice drop-down box and jquery combo box

Use jquery to implement multiple-choice drop-down box and jquery combo box

[Preface] Many plug-ins are used on the website, such as the bootstrap-select plug-in dependent on bootstrap. Although these frameworks can implement many functions, but in actual projects, only one of these functions may be used. If all functions are introduced, the loading of the entire js will be too heavy. For example, the bootstrap-select plug-in mentioned above can reach more than 300 k without compression. Therefore, it is not worth the candle to implement a configurable drop-down box.

For this reason, I wrote a simple multi-choice drop-down box with jquery to enter the combo box.

CSS Code:
 1         container{ 2             margin: 20px auto; 3             padding:0 15px; 4             width: 50%;     5             height:300px; 6             box-sizing: border-box;         7         } 8         .text-container{ 9             display: inline-block;10             float:left;11             width: 15%;12             height: 32px;13             line-height: 32px;14             box-sizing: border-box;15         }16         .selectContainer{17             width: 70%;18             height:200px;19             float:left;20             position: relative;21             padding:0;22             margin:0;23             box-sizing: border-box;24         }25         .selectedContent{26             width:85%;27             height: 25px;28             float:left;            29         }30         .dropDown-toggle{31             width:14%;32             height:31px;33             line-height: 31px;34             text-align: center;35             border: 1px solid silver;36             border-left:none;37             float:left;38             padding:0;39             margin:0;40             box-sizing: border-box;41             cursor: pointer;42         }43         .dropDown-menu{44             margin:0;45             padding:0 15px 10px;46             width:100%;47             border:1px solid silver;48             border-top: none;49             box-sizing: border-box;50             list-style: none;51             position: absolute;52             top:31px;53             right:0;54         }55         .items{56             margin-top:8px;57             padding: 2px;58             cursor: pointer;59         }60         .items:hover{61             background: #ddd;62         }63         .isSelectedText{64             display: inline-block;65             width:90%;66         }67         .dsn{68             display: none;69         }70     

 

HTML Code:
1 <div class = "container"> 2 <span class = "text-container"> favorite fruit </span> 3 <div class = "multipleSelect selectContainer"> 4 <input type = "text" class = "selectedContent"> 5 <div class = "dropDown-toggle"> select </div> 6 <ul class = "dropDown-menu dsn"> 7 <li class = "items"> 8 <span class = "isSelectedText"> Apple </span> 9 <span class = "isSelected"> <input type = "checkbox"> </span> 10 </li> 11 <li class = "items"> 12 <span class = "isSelectedText"> li </span> 13 <span class = "isSelected"> <input type = "checkbox"> </span> 14 </li> 15 <li class = "items"> 16 <span class = "isSelectedText"> oranges </span> 17 <span class = "isSelected"> <input type = "checkbox"> </span> 18 </li> 19 <li style = "text-align: right "> 20 <button type =" button "class =" confirmSelect "> OK </button> 21 </li> 22 </ul> 23 </div> 24 </ div>

 

JavaScript Code:
 1 $('.isSelected input[type=checkbox]').on('click', function(){ 2             var selectedItems = $(this).parents('.dropDown-menu').prevAll('.selectedContent').val().split(' '); 3             var thisItem = $(this).parent().prev().text(); 4             var isExisted = 0; 5             var isChecked = $(this).is(':checked'); 6             if(isChecked){ 7                 selectedItems.map(function(item, index){ 8                     if(item === thisItem){ 9                         isExisted++10                     }11                 });12                 if(!isExisted){13                     selectedItems.push(thisItem)14                 }15             }16             else{17                 selectedItems.map(function(item, index){18                     if(item === thisItem){19                         selectedItems.splice(index, 1);20                     }21                 });22             }23             $(this).parents('.dropDown-menu').prevAll('.selectedContent').val(selectedItems.join(' '));24         })25         $('.confirmSelect').on('click', function(){26             $(this).parents('.dropDown-menu').addClass('dsn');27         })28         $('.dropDown-toggle').on('click', function(){29             $(this).next().toggleClass('dsn')30         });

This component uses the array map method, which may be incompatible with ie. Because Internet Explorer cannot be opened on your computer, it can be used normally after being tested in the 360 browser.

Please kindly advise.