select2 用属性选择器 动态添加 只有新添加的标签有渲染 原有标签的渲染没了 20C

图片说明

js代码 update界面显示部分

// 显示修改关键字症状界面
function updateView(id, system_id) {
    $("#btntype").val(1);

    $("#Submit1").click(function() {
        add(1);

    });

    $
            .ajax({
                type : "POST",
                url : "/erzhentang/manage/forAjax.do?requestType=12.1",
                data : "id=" + id + "&system_id=" + system_id, // 发送到服务器的数据默认id是结论id
                success : function(msg) {
                    $("#xuewei_id").val("1,2,3").select2();
                    /* alert(msg); */
                    var json = eval('(' + msg + ')');
                    document.getElementById("addModel").style.display = "block";
                    document.getElementById("id1").value = json.earScanJielun.id;
                    document.getElementById("system_id1").value = json.earScanJielun.system_id;
                    /* 遍历所属系统下所有 耳穴频扫疾病项 */
                    var arrESJ = eval(json.listEarScanJibing);// arrESJ是一个数组
                    var checkESJ = document.getElementById("jibing_num1");
                    var str2 = "";
                    for (var j = 0; j < arrESJ.length; j++) {
                        str2 += "<option value=\"" + arrESJ[j].jibing_num
                                + "\">" + arrESJ[j].name + "</option>";
                        var checkESJ2 = arrESJ[j].name;
                        if (arrESJ[j].jibing_num == json.earScanJielun.jibing_num) {// 疾病编号人为控制每个编号都是唯一
                            arrESJ[j].name = "selected='selected'";
                        }
                        $("#jibing_num1").html(str2);
                    }
                    document.getElementById("jibing_num1").value = json.earScanJielun.jibing_num;
                    document.getElementById("jielun_rank1").value = json.earScanJielun.jielun_rank;
                    document.getElementById("jielun1").value = json.earScanJielun.jielun;
                    /* 下半截部分组合表动态展示修改和添加 */
                    var arrESC = eval(json.listEarScanCp);// arrESC是一个数组频扫结论组合表
                    var str = "";
                    var str1 = "";
                    for (var i = 0; i < arrESC.length; i++) {
                        str += "<tr>";
                        str += "<td colspan=\"8\">";
                        str += "<div style=\"margin-left: 148px;\" id=\"earScanCp\">";
                        str += "<div style=\"float: left;\">";
                        str += "<textarea style=\"width: 50px;margin-left: -86px;position: absolute;\" id=\"cp_id\" name=\"cp_id\" >"
                                + arrESC[i].id + "</textarea>";
                        str += "<select style=\"width: 60px;height: 36px;margin-left: 20px;\" id=\"gender\" name=\"gender\" >"
                        var myselect = document.getElementById("gender");// 这个获取的是静态jsp页面里标签
                        /*
                         * 下拉框主要是应展示项和所有下拉选项的值判断是否对应 分清主和客
                         * 所有展示项目为主表客表的某一项值和遍历主表的值对应 这里面 下拉框所有选项值是主表
                         */
                        var str1 = "";
                        for (var j = 0; j < myselect.options.length; j++) {// 下拉框是主家从静态页面获取并且遍历它
                            // alert("j值:" + myselect.options[j].value);
                            str += "<option value=\""
                                    + myselect.options[j].value
                                    + "\" "
                                    + (myselect.options[j].value == arrESC[i].gender ? "selected='selected'"
                                            : "") + ">"
                                    + myselect.options[j].text + "</option>";
                        }
                        "</select>";
                        str += "<textarea style=\"width: 50px;margin-left: 10px;\" id=\"min_age\" name=\"min_age\" >"
                                + arrESC[i].min_age + "</textarea>";
                        str += "<textarea style=\"width: 50px;margin-left: 10px;\" id=\"max_age\" name=\"max_age\" >"
                                + arrESC[i].max_age + "</textarea>";
                        // str += "<textarea style=\"width:
                        // 300px;margin-left:10px;\" id=\"xuewei_id\"
                        // name=\"xuewei_id\" >"
                        // + arrESC[i].xuewei_id + "</textarea>";
                        str +="<div id=\"selectSection\">";
                        str += "<select style=\"width: 300px;margin-left:10px;\" id=\"xuewei_id\" name=\"xuewei_id\"class=\"combox\" multiple >"
                        str += "<optgroup label=\"小辈儿组\">";
                        str += "<option value=\"1\">心</option>";
                        str += "<option value=\"2\" " + "selected='selected'"
                                + ">" + "肺" + "</option>";
                        str += "<option value=\"3\" " + "selected='selected'"
                                + ">" + "小肠" + "</option>";
                        str += "<option value=\"4\">" + "口" + "</option>";
                        str += "<option value=\"5\">" + "食道" + "</option>";
                        str += "</optgroup>";
                        str += "</div>"             

                        $("#xuewei_id").val("1,2,3").select2();

                        str += "<textarea style=\"width: 220px;margin-left: 10px;\" id=\"chuzhen_id\" name=\"chuzhen_id\" >"
                                + arrESC[i].chuzhen_id + "</textarea>";
                        str += "<select style=\"width: 60px;height: 36px;margin-left: 10px;\" id=\"bp\" name=\"bp\" >"
                        var myselect1 = document.getElementById("bp");// 这个获取的是静态jsp页面里标签
                        for (var k = 0; k < myselect1.options.length; k++) {// 下拉框是主家从静态页面获取并且遍历它
                            // alert("j值:" + myselect1.options[k].value);
                            str += "<option value=\""
                                    + myselect1.options[k].value
                                    + "\" "
                                    + (myselect1.options[k].value == arrESC[i].bp ? "selected='selected'"
                                            : "") + ">"
                                    + myselect1.options[k].text + "</option>";
                        }
                        "</select>";
                        str += "<textarea style=\"width: 50px; height: 36px;margin-left: 10px;margin-top: 0px;\" id=\"jielun_conform\" name=\"jielun_conform\">"
                                + arrESC[i].jielun_conform + "</textarea>";
                        str += "</div>";
                        str += "<div >";
                        str += " <input type=\"button\" onclick=\"delRow(this,"
                                + arrESC[i].id
                                + ","
                                + arrESC[i].bianzhengId
                                + ")\" value=\"删除\" id=\"deleteESC\" name=\"deleteESC\" style=\"float: left; margin-left:10px; margin-top: 5px;\">";
                        str += "</div>";
                        str += "</div>";
                        str += "</td>";
                        str += "</tr>";
                        /* 替换静态页面 */
                        $("#tbody1").html(str);

                        select2Execute();
                    }

                }
            });
} 

js代码add添加行

 // 添加行 频扫组合表信息
function addRow1() {
    var str = "";
    str += "<tr>";
    str += "<td colspan=\"8\">";
    str += "<div style=\"margin-left: 148px;\" id=\"earScanCp\">";
    str += "<div style=\"float: left;\">";
    str += "<textarea style=\"width: 50px;margin-left: -86px;position: absolute;\" id=\"cp_id\" name=\"cp_id\" ></textarea>";
    str += "<select style=\"width: 60px;height: 36px;margin-left: 20px;\" id=\"gender\" name=\"gender\" >"
    var myselect = document.getElementById("gender");// 这个获取的是静态jsp页面里标签
    for (var j = 0; j < myselect.options.length; j++) {// 下拉框是主家从静态页面获取并且遍历它
        str += "<option value=\"" + myselect.options[j].value + "\">"
                + myselect.options[j].text + "</option>";
    }
    "</select>";
    str += "<textarea style=\"width: 50px;margin-left: 10px;\" id=\"min_age\" name=\"min_age\" ></textarea>";
    str += "<textarea style=\"width: 50px;margin-left: 10px;\" id=\"max_age\" name=\"max_age\" ></textarea>";
    // str += "<textarea style=\"width: 300px;margin-left: 10px;\"
    // id=\"xuewei_id\" name=\"xuewei_id\" ></textarea>";


    str +="<div id=\"selectSection\">";
    str += "<select style=\"width: 300px;margin-left:10px;\" id=\"xuewei_id\" name=\"xuewei_id\" class=\"combox\" multiple >"
    str += "<optgroup label=\"小辈儿组\">";
    str += "<option value=\"1\">心</option>";
    str += "<option value=\"2\">" + "肺" + "</option>";
    str += "<option value=\"3\">" + "小肠" + "</option>";
    str += "<option value=\"4\">" + "口" + "</option>";
    str += "<option value=\"5\">" + "食道" + "</option>";
    str += "</optgroup>";
    "</select>";
    str += "</div>";
    str += "<textarea style=\"width: 220px;margin-left: 10px;\" id=\"chuzhen_id\" name=\"chuzhen_id\" ></textarea>";
    str += "<select style=\"width: 60px;height: 36px;margin-left: 10px;\" id=\"bp\" name=\"bp\" >"
    var myselect1 = document.getElementById("bp");// 这个获取的是静态jsp页面里标签
    for (var k = 0; k < myselect1.options.length; k++) {// 下拉框是主家从静态页面获取并且遍历它
        // alert("j值:" + myselect1.options[k].value);
        // alert("text值:" + myselect1.options[k].text);
        str += "<option value=\"" + myselect1.options[k].value + "\">"
                + myselect1.options[k].text + "</option>";
    }
    "</select>";
    str += "<textarea style=\"width: 50px; height: 36px;margin-left: 10px;\" id=\"jielun_conform\" name=\"jielun_conform\"></textarea>";
    str += "</div>";
    str += "<div >";
    str += " <input type=\"button\" onclick=\"delRow(this)\" value=\"删除\" id=\"deleteESC\" name=\"deleteESC\" style=\"float: left; margin-left:10px; margin-top: 5px;\">";
    str += "</div>";
    str += "</div>";
    str += "</td>";
    str += "</tr>";
    $("#rowTable1").append(str);
    // $("select[name='xuewei_id']").select2({
//  $("#xuewei_id").select2().trigger();
//   $("#xuewei_id").trigger('change')
    select2Execute();
}

执行select2部分

 /* 执行select2方法 */
function select2Execute() {

    $(function() {
//       $("select[name='xuewei_id']").select2({
//       $('select[id="xuewei_id"]').select2({
//      $('#xuewei_id').select2({
//           $("#selectSection").find("select.combox").select2({ 
                 $(".combox").select2({

            placeholder : "请至少选择一个人名",
            tags : true,
            createTag : function(decorated, params) {
                return null;
            },
            width : '256px'
        });

        function formatState(state) {
            if (!state.id) {
                return state.text;
            }
            var $state = $('<span>' + state.text + '</span>');
            return $state;
        }
        ;

        $('#sel_recommender').select2({
            placeholder : "请选择一个人名",
            templateResult : formatState,
            width : '256px'
        });
    });
}

5个回答

之前你的提问,已经回答过了,你还是没搞明白。

 str += "<select style=\"width: 300px;margin-left:10px;\" id=\"xuewei_id
$("#xuewei_id").val("1,2,3").select2();这代代码

你这两行代码放到循环里面,所有select都共用一个id那通过id选择器只能匹配到一个,这样写有很大问题,你实在想用id选择器,最起码也编个号
id=“xuewei_id1”,id=“xuewei_id2”。。。。

u012503756
bulidfer xuewei_id的值 是从后台取得 是个变量 别的标签都没问题
一年多之前 回复
u012503756
bulidfer 换个 id可以实现 但是 我想实现动态 循环添加 select2 怎么实现 xuewei_id 总不能手动一个一个 命名吧
一年多之前 回复
u012503756
bulidfer 我用属性选择器 还是不行
一年多之前 回复
u012503756
bulidfer 谢谢 我试试
一年多之前 回复

回复u012503756:

给你写个样例,你自己在这基础上发散

 var count = 3;
 for(var i = 0; i < count; i++) {
    var $selec =  $("<select/>").appendTo("body").attr("id", "id" + i);//创建一个select 添加到body
    $selec.select2();//渲染select2控件
 }

你可以使用class 而不是用id,id必须是唯一的,class可以重复;例如select标签你都加上一样的class=“selectAll”,然后jquery写$(".selectAll").val("1,2,3").select2();
这样只要有class为selectAll的标签都可以渲染select2的方法了。

u012503756
bulidfer 我把id写死的属性 给去掉了 然后 用属性选择器name就实现了 但是 后台获取的值 是个 大杂烩 应该获取每一个name属性对应的值添加到数据库
一年多之前 回复

图片说明

图片说明

id可以用js动态创建啊,做拼串处理

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
select2 用js动态循环添加 没有任何渲染 只有第一个默认有渲染
-
动态添加name属性相同的select2标签多选下拉框 如何取值和赋值
-
jquery 动态添加select
-
select 的 option 数据渲染时 处理问题...
-
ajax返回数据给select标签添加问题
-
bootstrap-select2 插件如何给option添加属性?
-
给select标签中的option添加bootstrap的模态框
-
select中option的selected属性的动态指定!!
-
name属性相同的两个个select2标签值合并到一个数组里了 如何获取每一个name对应标签的值
-
jquery中怎么禁用 table某一行的select标签 而不是全部禁用,select只有name属性 没有id?
-
bootstrap的select标签不能动态添加option
-
struts2 select标签,headValue属性的问题。
-
前台的动态添加的select如何在后台进行数据绑定(数据库中查询出来的)比较急
-
iview中使用render渲染table,加入input和select,导致table的多选框失效
-
document.querySelectorAll()获取select2标签name属性的选中项值
-
struts2 select标签获取action的集合属性值 动态生成下拉菜单 报错
-
如何用jquery动态的创建select2
-
一个动态select标签通过change方法给另一个select标签append 没有效果
-
一个struts2的select标签的问题?
-
记一道字节跳动的算法面试题
点击蓝色“五分钟学算法”关注我哟加个“星标”,天天中午 12:15,一起学算法作者 | 帅地来源公众号 | 苦逼的码农前几天有个朋友去面试字节跳动,面试官问了他一道链表相...
程序员真是太太太太太有趣了!!!
网络上虽然已经有了很多关于程序员的话题,但大部分人对这个群体还是很陌生。我们在谈论程序员的时候,究竟该聊些什么呢?各位程序员大佬们,请让我听到你们的声音!不管你是前端开发...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
吃人的那些 Java 名词:对象、引用、堆、栈
作为一个有着 8 年 Java 编程经验的 IT 老兵,说起来很惭愧,我被 Java 当中的四五个名词一直困扰着:**对象、引用、堆、栈、堆栈**(栈可同堆栈,因此是四个名词,也是五个名词)。每次我看到这几个名词,都隐隐约约觉得自己在被一只无形的大口慢慢地吞噬,只剩下满地的衣服碎屑(为什么不是骨头,因为骨头也好吃)。
LeetCode解题汇总目录
此篇为LeetCode刷题的汇总目录,方便大家查找,一起刷题,一起PK交流! 已解题目 考点 LeetCode 1. 两数之和(哈希) LeetCode 2. 两数相加(单链表反转) LeetCode 9. 回文数 LeetCode 11. 盛最多水的容器(双指针) LeetCode 15. 三数之和 LeetCode 17. 电话号码的字母组合(回溯...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
不识 Pandas,纵是老手也枉然?
作者 |周志鹏 责编 | 郭 芮 这段时间和一些做数据分析的同学闲聊,我发现数据分析技能入门阶段存在一个普遍性的问题,很多凭着兴趣入坑的同学,都能够很快熟悉Python基础语法,然后不约而同的一头扎进《利用Python进行数据分析》这本经典之中,硬着头皮啃完之后,好像自己什么都会了一点,然而实际操作起来既不知从何操起,又漏洞百出。 至于原因嘛,理解不够,实践不够是两条老牌的拦路...
接班马云的为何是张勇?
上海人、职业经理人、CFO 背景,集齐马云三大不喜欢的张勇怎么就成了阿里接班人? 作者|王琳 本文经授权转载自燃财经(ID:rancaijing) 9月10日,张勇转正了,他由阿里巴巴董事局候任主席正式成为阿里巴巴董事局主席,这也意味着阿里巴巴将正式开启“逍遥子时代”。 从2015年接任CEO开始,张勇已经将阿里巴巴股价拉升了超过200%。但和马云强大的个人光环比,张勇显得尤其...
14 个实用的数据库设计技巧
点击上方“后端技术精选”,选择“置顶公众号”技术文章第一时间送达!作者:echozhjuejin.im/post/5d5b4c6951882569eb570958原始单据...
我在快手认识了 4 位工程师,看到了快速发展的公司和员工如何彼此成就!
作者 | 胡巍巍 出品 | CSDN(ID:CSDNnews) 从西二旗地铁站B口出来,步行700多米可以看到一个工业建筑风格的院子。这个独立的院子和后厂村各大互联网公司的高楼林立有些不同。 院子里有7栋6层高的楼,几栋楼之间打通,可以从A栋自由穿行到F栋。这里就是快手总部。这个园区可以容纳6000多名员工,目前40%以上是研发人员。 这些研发人员维护着快手这款日活超过2亿的ap...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
用Python分析2000款避孕套,得出这些有趣的结论
到现在为止,我们的淘宝教程已经写到了第四篇,前三篇分别是: 第一篇:Python模拟登录淘宝,详细讲解如何使用requests库登录淘宝pc端。 第二篇:淘宝自动登录2.0,新增Cookies序列化,教大家如何将cookies保存起来。 第三篇:Python爬取淘宝商品避孕套,教大家如何爬取淘宝pc端商品信息。 今天,我们来看看淘宝系列的第四篇 我们在上一篇的时候已经将淘宝数据爬取下来了,...
Spring高级技术梳理
Spring高级技术梳理 序言正文SpringDate部分Spring全家桶之SpringData——预科阶段Spring全家桶之SpringData——Spring 整合Hibernate与Hibernate JpaSpring全家桶之SpringData——Spring Data JPASpring全家桶之SpringData——SpringData RedisSpringBoot部分Sp...
如何在Windows中开启"上帝模式"
原文链接 : https://mp.weixin.qq.com/s?__biz=MzIwMjE1MjMyMw==&amp;mid=2650202982&amp;idx=1&amp;sn=2c6c609ce06db1cee81abf2ba797be1b&amp;chksm=8ee1438ab996ca9c2d0cd0f76426e92faa835beef20ae21b537c0867ec2773be...
Docker 零基础从入门到使用
诺!这只可爱的小鲸鱼就是docker了! Docker 是什么? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux 或 Windows 机器上( 摘自百度 )。 Docker 能干什么? 在讲 Docker 能干什么之前,我们不妨先看看没有 Docker 和有Docker分别是个什么样子的? 场景一 某公司需要开发...
再见 Docker,是时候拥抱下一代容器工具了
什么是 Linux 容器?Linux 容器是由 Linux 内核所提供的具有特定隔离功能的进程,Linux 容器技术能够让你对应用及其整个运行时环境(包括全部所需文件)一...
不足20行 python 代码,高效实现 k-means 均值聚类算法
关于 k-means 均值聚类算法的原理介绍、实现代码,网上有很多,但运行效率似乎都有点问题。今天稍微有点空闲,写了一个不足20行的 k-means 均值聚类算法,1万个样本平均耗时20毫秒(10次均值)。同样的数据样本,网上流行的算法平均耗时3000毫秒(10次均值)。差距竟然达百倍以上,令我深感意外,不由得再次向 numpy 献上膝盖!
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
北漂程序员,扬帆起航的地方
随着耳畔传来“你看这碗又大又圆、你看这面又长又宽......碗大宽无影、像儿时的回忆......”听着挺带劲,于是看了一下手机,原来是吴亦凡的作品《大碗宽面》,随着入耳的旋律,脑子也不由自主的想起 10 年前,在平西府吃 5 块钱一大碗牛肉板面的情景。 平西府最有名的就是这个牌坊啦。记得每当有同事问起住哪里?都会自豪的说住在王府里;隔三差五也会邀请朋友去府上坐坐。其实打内心里讲,平西府是一个...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
多线程编程是后台开发人员的基本功
这里先给大家分享一个小故事:在我刚开始参加工作的那年,公司安排我开发一款即时通讯软件(IM,类似于 QQ 聊天软件),在这之前我心里也知道如果多线程操作一个整型值是要加锁...
相关热词 c#sdf数据库连接 c# 使用配置文件 c#float 转int c#报警指示灯 c#复制二维数组 c# 歌词滚动 c#获取数据库一列数据 c#中parse用法 c#异步编程是什么意思 c#验证手机号正则