由于本组件中使用了数组的map方法

2019-11-19 作者:联系我们   |   浏览(120)

用jquery达成可输入多选下拉组合框,jquery组合框

  【写在前边的话】网址上无数用各样插件,举例依赖bootstrap的bootstrap-select插件等。尽管这么些框架能够兑现广大职能,但因为在其实项目中,大概只会用到中间的某部意义,如若一概引进,会促成整个js加载过于笨重。比方后面提到的bootstrap-select插件,在不收缩的状态下,达到300多k。因而,为了达成八个可填写的下拉框有一点举措失当。

  基于这种原因,于是私行用jquery写了叁个比较简单的多选下拉可填写组合框。  

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     最爱的水果
 3     <div class="multipleSelect selectContainer">
 4         <input type="text" class="selectedContent">
 5         <div class="dropDown-toggle">选择</div>
 6         <ul class="dropDown-menu dsn">
 7             <li class="items">
 8                 苹果
 9                 <input type="checkbox">
10             </li>
11             <li class="items">                    
12                 梨
13                 <input type="checkbox">
14             </li>
15             <li class="items">
16                 橘子
17                 <input type="checkbox">
18             </li>
19             <li style="text-align: right">
20                 <button type="button" class="confirmSelect">确定</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         });

  由于本组件中使用了数组的map方法,恐怕此办法在ie中不能够相称。由于鄙人Computerie不能够张开,用360浏览器测量试验后同样可是平常使用。

  请我们多多指教。

【写在前面的话】网址上众多用各样插件,例如重视bootstrap的bootstrap-select插件等。就算那...

本文由美高梅赌堵59599发布于联系我们,转载请注明出处:  由于本组件中使用了数组的map方法

关键词:

  • 上一篇:没有了
  • 下一篇:没有了