关于jQuery的attr给input赋值遇到遇到的问题

转载

mb5fdb09f39fed1 2021-11-02 14:36:00

文章标签 html 赋值 jquery 下拉框 ide 文章分类 云平台云计算

前段时间因为公司有个下拉框的需求（固定前几列不动，后面几个可以话滑动的多选下拉框）由于在网上找了几次插件发现都不满足，于是决定开始手写一个下拉多选

html部分：

1             <div class="input-group">
2                         <div style="position:relative;">
3                             <input type="text" id="test_div" />
4                         </div>
5                 </div>

js部分

1 (function () {
 2         $.fn.extend({
 3             checks_select: function (options) {
 4                 jq_checks_select = null;
 5                 $(this).click(function (e) {
 6                     jq_check = $(this);
 7                     if (jq_checks_select == null) {
 8                         jq_checks_select = $("<div class='checks_div_select'></div>").insertAfter(jq_check);
 9                         jq_checks_top = $("<div class='checks_div_top'></div>").appendTo(jq_checks_select)
10                         jq_checks_down = $("<div class='checks_div_down'></div>").appendTo(jq_checks_select)
11                         $.each(options, function (i, n) {
12                             //固定前面三个
13                             if(Number(i)<4){
14                                 check_div = $("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_top)
15                             }else{
16                                 check_div = $("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_down) 
17                             }
18                             // check_div = $("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_select);
19                             check_box = check_div.children();
20                             check_box.click(function (e) {
21                                 //jq_check.attr("value",$(this).attr("value") );
22 
23                                 temp = "";
24                                 $("input:checked").each(function (i) {
25                                     if (i == 0) {
26                                         temp = $(this).attr("value");
27                                     } else {
28                                         temp += "、" + $(this).attr("value");
29                                     }
30                                 });
31                                 jq_check.attr("value", temp);
32                                 e.stopPropagation();
33                             });
34                         });
35                     } else {
36                         jq_checks_select.toggle();
37 
38                     }
39                     e.stopPropagation();
40                 });
41                 $(document).click(function () {
42                     jq_checks_select.hide();
43                 });
44             }
45         })
46 
47     })(jQuery);
48 
49     $(document).ready(function () {
50         var options = {
51             1: "第一个选择项",
52             2: "第二个选择项",
53             3: "第三个选择项",
54             4: "第四个选择项",
55             5: "第五个选择项",
56             6: "第六个选择项",
57             7: "第三个选择项",
58             8: "第四个选择项",
59             9: "第五个选择项",
60             10: "第六个选择项"
61         };
62         $("#test_div").checks_select(options);
63     });