select2 多选下拉框的选项 重复 当选中的值为多选项 str拼接做了两次for循环 20C

如何用jquery 实行对 select选中赋值 且不重复拼接 option
图片说明

用了第二个方法 但是 不会回显
图片说明

js代码

 var arrESC = eval(json.listEarScanCp);// arrESC是一个数组频扫结论组合表
                    var arrESA = eval(json.listEarScanAcupoint);// arrESA是一个科研穴位信息
                    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>";

                        /* select2标签开始 */
                        str += "<textarea  style=\"width:300px;margin-left:10px;display:none;\" id=\"strXueweiId\" name=\"strXueweiId\" >"
                                + arrESC[i].xuewei_id + "</textarea>";


                        str += "<select name=\"xuewei_id\" class=\"form-control input-sm downList2\" multiple>";

                        alert("arrESA.length值:" + arrESA.length);
                        // 将arrESC[i].xuewei_id分割成一个数组
                        var arrXueweId = arrESC[i].xuewei_id.split(",");
                        alert("arrXueweId:" + arrXueweId)

                        for (var j = 0; j < arrESA.length; j++) {// 下拉框是主家从静态页面获取并且遍历它
                            for (var k = 0; k < arrXueweId.length; k++) {

                                str += "<option value=\""
                                        + arrESA[j].id
                                        + "\" "
                                        + (arrESA[j].id == arrXueweId[k] ? "selected='selected'"
                                                : "") + ">" + arrESA[j].text
                                        + "</option>";
                            }


                        }
                        "</select>";

执行select2部分

 function select2Execute() {

    $(function() {
        /* 1-本地注入方式 */

        $(".downList2").select2({
            // $("select[name='xuewei_id']").select2({
            // $('select[id="xuewei_id"]').select2({
            // $('#xuewei_id').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'
        });

        // 通过id获取select2的text值,这里的text值可能有空格,需注意
        function getSelect2Text(obj) {
            var select2Obj = $("select[name='xuewei_id']").select2();
            return select2Obj.find("option:selected").text();
        }

        /* 获取每一个name对应的值 */
        var strXueweiId = "";
        $("[name=xuewei_id]").each(function() {
            alert("this值:" + $(this).val());
            /* 拼接每一项name的值 组合成和其它项目类似 gender那样的数组 */
            strXueweiId += $(this).val() + "-";

        });
        alert("strXueweiId:" + strXueweiId)
        $("#strXueweiId").val(strXueweiId)

    });
}
0

6个回答

调试下,无非两个原因,一个是重复添加了,每次下拉打开的时候是不是都加载了一次
或者多个事件都触发了添加的逻辑

还有就是
for (var j = 0; j < arrESA.length; j++) {// 下拉框是主家从静态页面获取并且遍历它
for (var k = 0; k < arrXueweId.length; k++) {

                            str += "<option value=\""
                                    + arrESA[j].id
                                    + "\" "
                                    + (arrESA[j].id == arrXueweId[k] ? "selected='selected'"
                                            : "") + ">" + arrESA[j].text
                                    + "</option>";
                        }


                    }
调试下arrESA和arrXueweId分别是什么
0
u012503756
bulidfer 我把 str的值 debug出来了 看下图 怎么去重
11 个月之前 回复
u012503756
bulidfer 这个还真不是 简单的删除 option的问题
11 个月之前 回复
u012503756
bulidfer 回复caozhy: 是的 问题是 debug不出来了
11 个月之前 回复
u012503756
bulidfer 前端真的很差 不知道vue怎么样 太困绕了
11 个月之前 回复
u012503756
bulidfer $(".downList2").find("option:contains('心')").attr("selected",true); 还是无法赋值
11 个月之前 回复
caozhy
weixin_45841714 回复u012503756: 那你可以再你内循环里再循环判断下,是不是这个option已经添加了,只在没有添加的时候再拼接上去
11 个月之前 回复
caozhy
weixin_45841714 回复u012503756: 代码的错误是通过调试去排除的,而不是贴出来去看。感觉你这个问题重复问了很多次,但是即便回答你问题的人也需要通过调试才能帮你排错,而做到这一点需要重新搭建你整个运行环境。所以与其这样,其实你自己调试下,排除错误就是举手之劳。
11 个月之前 回复
u012503756
bulidfer 因为这个 多选是拼接的 只要选项框是多选 就会把option 有几个选项就会重复几次拼接
11 个月之前 回复
u012503756
bulidfer arrESA是 下拉框要显示的全部选项 arrXueweiId是一个数组 遍历每一项和 arrESA的id值匹配 选中
11 个月之前 回复

如何去重用jquery 重复的option

0
caozhy
weixin_45841714 一个是你用f12去看,一个是调试下,看str在循环以后是什么
11 个月之前 回复

图片说明
图片说明
加了去重的代码 什么都没有了 get(0)改为get(1) 第一个选项 心 可以出来

0

图片说明

图片说明

str拼接的值:
图片说明

0

两个 select 的option 只要多选 str拼接的option就会重复 关键怎么去重

0
u014794644
瓦史托德 逻辑?你选择一个,标记为selected,下拉应该隐藏所有selected
11 个月之前 回复
-1
u012503756
bulidfer 我的项目 是将 select2 标签 动态 拼接了 所有 不能单纯的套用 这些方法了 现在是 回显可以实现 但是下拉框也重复了
11 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
select2下拉框去除已经选中的值
/* 设置select2选中项不显示 */ .select2-results__option[aria-selected=true]{ display:none; }
select2 动态下拉框插件以及开发心得
select2 动态下拉框插件以及开发心得
select2 支持多值下拉框
select2是一个非常好用的下拉框插件,支持很多功能。 官方文档,例子:http://select2.github.io/ 现在记录一下我在工作中用到的下拉框多值选择。 html定义: 首先引入css,js库 在html中定义如下下拉框: Alabama ... Wyoming //注意,上面加上multiple="
jQuery select2设置默认值为下拉列表中的一个选项
一、select2中有initSelection接口,如图: 二、接口中有data-init和val,也就是初始化显示的值 三、在所需的jsp页面设置data-init和value值,如图: (注:data-init为显示的值,value为表中的id值)
关于bootstrap框架中select2的多选问题
1.类似普通select 标签一样 select id="user_Level" class="form-control" multiple="multiple"> option value="10">VIPoption> option value="20">管理级别option> option value="30">成员option> select> 唯一区别就是
关于select标签多选功能的select-2样式的清空选中项
今天说的就是select标签的多选功能的 使用,使用select2组件完成多选。下面是我们需要引入的文件JQuery最好大于等9,要不会有一些特效无法使用&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;select2.min.css&quot;&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;jquery-11.3.m
select2--多选框无法排序问题---手动输入的总排在下拉选择的后面
select2插件效果挺美观,项目中有使用,但是手动输入的总排在下拉选择的后面,无法按照添加选择的顺序排。代码如下://多选$(&quot;#sel_menu3&quot;).select2({ tags: true, placeholder: &quot;请选择&quot;, allowClear: true, //maximumSelectionLength: 7  //最多能够选择的个数});$(&quot;select&quot;).on(&quot;sel...
select2表单带出编辑,多选赋值问题
最后实在解决不了 所以用本办法解决了。。 主要是initSelection 初始化选择 在标签没有值的时候initSelection不会走,只有有值的时候才会走,刚好满足编辑时显示值,添加时不影响
jQuery select2设置默认值从列表中的一个选项
&amp;lt;link href=&quot;/static/jquery-select2/3.4/select2.min.css&quot; rel=&quot;stylesheet&quot; /&amp;gt; &amp;lt;script src=&quot;/static/jquery-select2/3.4/select2.min.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;
select2 插件的选项无法选中
select2 是一个可以自动补全的插件。 官网地址:http://ivaynberg.github.io/select2/   使用“Loading Remote Data”的例子,利用ajax从服务器端获得json数据,展现在select2上面。 发现一个问题:不能选择这些选项。 原始代码如下: $('#searchTasksSelectId').select2({ wi...
select2初始化默认选中值(多选)
  之前用select2初始化默认值使用了select2('val','1'),这样做没问题,但只能用在单选上,多选的话,即使将val后面的值改成数组['0', '2']这种形式也没用。 &amp;lt;script type=&quot;text/javascript&quot;&amp;gt; $(document).ready(function() { var data = [{ id: 0, text...
select2清空选择框
初始状态: 用户选择后: 当我们需要清空这个选择框的内容该怎么办 通过$('#subject').val("")可以将select2的选择框内的val清空,但是在页面上显示的仍然是原有的内容(998(1.1版)),并不会回到初始状态,这样看上去就不太对 然后通过控制台发现选择框内的信息是显示在select2-subject-container这个id下的,在用户选择完之后,他会
vue+elementUI+select 选中多个值,我要删除其中的一两个 方法如下
&lt;el-select value-key="moduleCode" multiple filterable allow-create default-first-option @remove-tag='removeTag' v-model="ruleForm.module3" placeholder="...
下拉选择插件select2赋值、创建、清空
需求效果 赋值数组。$("#select2id").val(tagList).trigger('change'); 清空选项。 $("#select2id").select2("val", " ");  动态创建。 $("#Select2id").html('')                  arr.forEach(e=>{
select2如何清除选择项
select2如何清除选择项
Select2清空选择框
初始状态:用户选择后:当我们需要清空这个选择框的内容该怎么办通过$('#subject').val(&quot;&quot;)可以将select2的选择框内的val清空,但是在页面上显示的仍然是原有的内容(998(1.1版)),并不会回到初始状态,这样看上去就不太对然后通过控制台发现选择框内的信息是显示在select2-subject-container这个id下的,在用户选择完之后,他会默认将选择的显示信息加在这个...
select下拉选择第一个选项为空白、option无法选中的解决办法,
问题:&amp;lt;select ng-model=&quot;id&quot;&amp;gt; &amp;lt;option value=&quot;{{v.id}}&quot; ng-repeat=&quot;v in list&quot; ng-bind=&quot;v.name&quot; ng-selected=&quot;v.id == id&quot;&amp;gt;&amp;lt;/option&amp;gt; &amp;lt;/select&amp;gt;第一个选项为空白;或者
select2 清空数据
  select2.js 没有清空数据的API,下面的方法可以间接的提供该功能。 $('#memberKey').select2('data', null);    
你知道吗,如何使用select2插件实现下拉框一次性选多个值、以及数据的回显
页面展示标签&amp;lt;td class=&quot;vatop rowform&quot; style=&quot;width:auto;&quot;&amp;gt;                    &amp;lt;select style=&quot;width: 285px;&quot; class=&quot;combox&quot; name=&quot;investmentMethod&quot; id=&quot;investmentMethod&quot; multiple   
jquery select2设置选择的值
(function($){ selections = [ {id:1,text:'Enhancement'}, {id:2,text:'Bug'}, {id:3,text:'Duplicate'}, {id:4,text:'Invalid'}, {id:5,text:'Won\'t Fix'} ];
select2 选择的内容不能显示问题
最近做页面弹窗,遇到一个多选框(select2 multiple),编辑的时候,在打开modal之前先给各个元素赋值,但对多选框赋值时,出现问题了,下拉框中的option选项可以选中,但是输入框中却不显示选中项的text. 原来的select赋值代码(给5个多选框赋值): var mutli_html = {'mult_user': res.user, 'mult_user_group': r
select2如何设置默认空值
1、问题背景     select2搜索下拉框,当满足某种条件时,让它默认选中空值2、问题原因 select2默认选择空值 $(function(){ $("#selectNull").select2(); $("#selectNull").on("select2:select",function(){ var data = $(this).val();
select重复选择同一项,还可以触发onchange事件
xxxxxxxx1 xxxxxxxx2 xxxxxxxx3 当你重复点击同一项的时候,你会发现根本不会执行onchange方法.大家可以依照下面的方法,就可以实现重复点击的时候也能够实现onchange方法了,如果你们还有更好的方法,欢迎一起交流 var id = document.getElementById("u18"); id.addEventListener('chang
在vue中把一个下拉框分成多个组并可以选择多个选项
通常一个字段如果有多个选择,我们会使用下拉框来表现数据,如支付类型(支付宝,微信,银行卡);但是有时候普通的下拉框满足不了业务需求,如我想选择多种支付方式,甚至如果支付方式又延伸为线上和线下两大类,线上为支付宝等等,线下为当面交易等等,这样页面的数据展示效果和页面与后台存值取值交互就变得更麻烦。但是vue已经为我们安排好了一切~ 本篇博客就以上述场景作为例子来写一个demo。  ...
html表单 select多选下拉箭头的问题
开发中碰到 需要使用表单多选标签select,但是需求是自带酷炫的外框,而且下拉箭头不能用原生的。首先是初始化select标签,清除原生的边框样式:border:none;outline-style:none;去掉原生箭头然后模拟箭头 {appearance:none; -moz-appearance:none; -webkit-appearance:none;},一般需要加上前缀,有兼
select标签重复选中相同内容触发onChage事件
$("#select").change(function(){ //doSomething such as alert(1) alert(1); $(this).blur(); }).focus(function(){ $(this)[0].selectedIndex = -1; ...
select 多次选择option 多个option selected解决方案
问题如图所示:动态渲染后对select 中的option 多次进行选择,option selected多个这会导致显示出错解决方案:每次动态渲染时清空  option selected属性$(&quot;.four-select option&quot;).removeAttr(&quot;selected&quot;);.four-select 为所选择的元素...
重置select select2下拉框为选中状态
重置select2下拉框为初始状态/*重置select2下来框*/ $("#loc_city option:first").prop("selected", 'selected') $('#loc_city').trigger('change.select2'); // Notify only Select2 of changes
select2 多选取值、赋值
//多选取值 function getMultiSelectVal(id) { return $.map($(&amp;amp;amp;amp;amp;quot;#&amp;amp;amp;amp;amp;quot; + id).select2('data'), function(value) { return value.id }).join(&amp;amp;amp;amp;amp;quot;,&amp;amp;amp;amp;amp;quot;); } //多选赋值 /
关于select2默认选中 动态选中 显示
参考网址:http://blog.csdn.net/u012374381/article/details/72629233
select2 插件 获取多选和单选选中值。value和text
一:获取select2选中项option的value和text,多选用jsonarry格式返回       单选:         //该方法也可以获取多选的数据,但是val 是以list返回的,而text会以一条字符串返回。         var  val= $('#company_kh').val();         var  text=$('#company_kh option:...
select2 默认选中
项目组 $(function(){ //设置输入框宽度 $(".js-example-basic-multiple").select2({'width':'500px'});  $(".js-example-basic-single").select2({'width':'250px'});  selectedStr()
解决select2默认赋值问题
1、数据来源于静态数据 $(&quot;.test&quot;).select2({ width: &quot;100%&quot;, minimumResultsForSearch: -1, data:[{id:1,name:1},{id:2,name:2}, {id:3,name:3},{id:4,name:4}, ...
select2默认选择值
$(document).ready(function() { var data = [{ id: 0, text: 'aaa' }, { id: 1, text: 'bbb' }, { id: 2, text: 'ccc' }]; $(".js-example").select2({ data: data, placeholder: "请选择
select2插件使用,当输入的值没有匹配到从后台取的数据时,将当前输入的值加载到select2下拉框
select2插件使用,当输入的值没有匹配到从后台取的数据时,将当前输入的值加载到select2下拉框 在使用select2插件时,我们经常用到输入的值没有匹配到,想要把当前输入的值放到下拉框,这里我举例两种不同的写法,基于angularJS和javaScript. html和jsp // html页面代码 &amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;col-md-4&amp;amp;amp;quot;&amp;amp
使用select2.js实现多功能下拉框,select2中文api
最近项目中有个需求是商品能够选择多个标签,类似jire中选择标签: 能把选择后选项显示在输入框中,删除时连同整个标签一起删。经过网上咨询、请教同事后,得到一致意见是使用select2。下面是使用select2的初始化、动态赋值,实现标签化多选、以及遇到的问题:1,从http://select2.github.io/examples.html处下载select2源码,把dist目录中css、js引用
select2下拉框一个默认选中option的小问题
开发遇到一个功能,需要用户登录进来后默认选中某一项参数 但是古怪的是我在第一个页面使用 $(&quot;#xxx&quot;).val(xxx);默认选中就没问题, 但是我在第二个页面使用$(&quot;#xxx&quot;).val(xxx);就不行. 而且我使用$(&quot;#pilotId&quot;).select2().select2('val', $('#pilotId[value=&quot;'+user_id+'&quot;]').val());这种...
select2下拉框插件的使用,ajax请求
导入样式以及js。(jeesite已经在head.jsp中导入,不用自己导) &amp;lt;link href=&quot;/jquery-select2/3.4/select2.min.css&quot; rel=&quot;stylesheet&quot; /&amp;gt; &amp;lt;script src=&quot;/jquery-select2/3.4/select2.min.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;
【前端】select标签选择多个option--扩展字段长度,实现换行
前言 &amp;amp;amp;nbsp;&amp;amp;amp;nbsp; 主要内容 一、 &amp;amp;amp;nbsp;&amp;amp;amp;nbsp;1. $(cinemas).each(function (idxtmp, cinema) { var shortName=cinema.cinemaShortName; if(shortName.length&amp;amp;amp;lt;6){ var num=
不能选择重复的下拉框
New Document 第一完成人 第二完成人 第三完成人 第四完成人 第五完成人 第六完成人 第七完成人 第八完成人 第九完成人 ...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 尚学堂大数据培训做了多久 学习当产品经理