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

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

 

 

 html部分：

            <div class="input-group">
                        <div style="position:relative;">
                            <input type="text" id="test_div" />
                        </div>
                </div>

js部分

(function () {
        $.fn.extend({
            checks_select: function (options) {
                jq_checks_select = null;
                $(this).click(function (e) {
                    jq_check = $(this);
                    if (jq_checks_select == null) {
                        jq_checks_select = $("<div class='checks_div_select'></div>").insertAfter(jq_check);
                        jq_checks_top = $("<div class='checks_div_top'></div>").appendTo(jq_checks_select)
                        jq_checks_down = $("<div class='checks_div_down'></div>").appendTo(jq_checks_select)
                        $.each(options, function (i, n) {
                            //固定前面三个
                            if(Number(i)<4){
                                check_div = $("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_top)
                            }else{
                                check_div = $("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_down) 
                            }
                            // check_div = $("<div><input type='checkbox' value='" + n + "'>" + n + "</div>").appendTo(jq_checks_select);
                            check_box = check_div.children();
                            check_box.click(function (e) {
                                //jq_check.attr("value",$(this).attr("value") );

                                temp = "";
                                $("input:checked").each(function (i) {
                                    if (i == 0) {
                                        temp = $(this).attr("value");
                                    } else {
                                        temp += "、" + $(this).attr("value");
                                    }
                                });
                                jq_check.attr("value", temp);
                                e.stopPropagation();
                            });
                        });
                    } else {
                        jq_checks_select.toggle();

                    }
                    e.stopPropagation();
                });
                $(document).click(function () {
                    jq_checks_select.hide();
                });
            }
        })

    })(jQuery);

    $(document).ready(function () {
        var options = {
            1: "第一个选择项",
            2: "第二个选择项",
            3: "第三个选择项",
            4: "第四个选择项",
            5: "第五个选择项",
            6: "第六个选择项",
            7: "第三个选择项",
            8: "第四个选择项",
            9: "第五个选择项",
            10: "第六个选择项"
        };
        $("#test_div").checks_select(options);
    });

其实代码很简单 我写的也不是很好，在这里面有个问题就是第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