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

发布时间 2023-08-05 23:14:01作者: jack_Meng

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

 

 

 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