前段时间因为公司有个下拉框的需求（固定前几列不动，后面几个可以话滑动的多选下拉框）由于在网上找了几次插件发现都不满足，于是决定开始手写一个下拉多选
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 });
其实代码很简单 我写的也不是很好，在这里面有个问题就是第31行代码，我通过 jq_check.attr("value", temp)赋值的时候遇到了问题
在我的demo中通过attr去改变输入框的value时 页面的html结构上的value改变了，然后页面上实际渲染的效果也是我选择的值 当我将demo引入到项目中时，发现html结构的value值改变了，但是页面上一直没有渲染
也不知道具体原因
后来发现 有个方法同样可以实现给input动态赋值
?| 1 |
$('#test_dev').prop('value', temp);
|
jquery的prop方法完美的解决了我这个问题。既可以动态赋值又能正常的清空值和页面上的显示的问题。
出处：https://www.cnblogs.com/Little-fat-boy/p/15498857.html
标签：jQuery,attr,遇到,选择项,jq,value,check,checks,select From： https://www.cnblogs.com/mq0036/p/17608834.html