关于jQuery的attr给input赋值遇到遇到的问题
前段时间因为公司有个下拉框的需求（固定前⼏列不动，后⾯⼏个可以话滑动的多选下拉框）由于在⽹上了⼏次插件发现都不满⾜，于是决定开始⼿写⼀个下拉多选
html部分：
1            <div class="input-group">
2                        <div >
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);
7if (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//固定前⾯三个
13if(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) {
25if (i == 0) {
26                                        temp = $(this).attr("value");
27                                    } else {
28                                        temp += "、" + $(this).attr("value");
29                                    }
jquery在项目里是干啥的
30                                });
31                                jq_check.attr("value", temp);
32                                e.stopPropagation();
33                            });
34                        });
35                    } else {
36                        jq_le();
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 () {
50var options = {
511: "第⼀个选择项",
522: "第⼆个选择项",
533: "第三个选择项",
544: "第四个选择项",
555: "第五个选择项",
566: "第六个选择项",
577: "第三个选择项",
588: "第四个选择项",
599: "第五个选择项",
6010: "第六个选择项"
61        };
62        $("#test_div").checks_select(options);
63    });
其实代码很简单我写的也不是很好，在这⾥⾯有个问题就是第31⾏代码，我通过    jq_check.attr("value", temp)赋值的时候遇到了问题
在我的demo中通过attr去改变输⼊框的value时页⾯的html结构上的value改变了，然后页⾯上实际渲染的效果也是我选择的值当我将demo 引⼊到项⽬中时，发现html结构的value值改变了，但是页⾯上⼀直没有渲染
也不知道具体原因
后来发现有个⽅法同样可以实现给input动态赋值
$('#test_dev').prop('value', temp);
jquery的prop⽅法完美的解决了我这个问题。既可以动态赋值⼜能正常的清空值和页⾯上的显⽰的问题。 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。