文档章节

【原创】操作chosen-获取值到对象-遍历对象以数组的方式追显-删除对象数据

柴高八斗之父
 柴高八斗之父
发布于 2017/09/04 20:36
字数 705
阅读 19
收藏 0
点赞 0
评论 0

声明:例子的chosen是jquery的select下拉插件,需要自行去下载;狠狠戳这里https://harvesthq.github.io/chosen/

此例主要实现步骤:

  1. 左侧select,change时获取select选中的值(2个值,一个是:data-id,另一个:文本值),trouble_selected_data[this_id] = { text: $(this).val()},然后赋值到创建的对象中;并做判断;(如此项存在,则不让添加,是通过自定义属性data-id来判断;否则就赋值给创建的对象。)
  2. 右侧遍历对象,以数组的方式来一次性追加进去;
  3. 删除分2步:1是对对象数据的删除;2对dom元素的删除;两者缺一不可。

js如下:

<script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		var trouble_selected_data = new Object();
		$("#trouble_selected").change(function(){
			
			var this_id = $(this).find('option:selected').attr('data-id') //选定的option
			var this_val =$(this).val();

            if (this_id  == undefined)
			{
				alert("请选择")
				return false;
			}
			
			if (this_id in trouble_selected_data == true )
			{
				alert("添加已存在!")
				return false;
			}
			else
			{
				//写入对象----获取id和文本值
				trouble_selected_data[this_id] = { text: $(this).val()}
				console.log(trouble_selected_data);
				
				//遍历对象 写入数组
				var inner = new Array();
                for (var x in trouble_selected_data) {  //for in 中的X是遍历的是键
                    inner.push('<li data-id="' + x + '"><div>' + trouble_selected_data[x].text + '</div> <i class="zmdi zmdi-close"></i></li>');
                }  
                console.log(inner)
                 
                //写入
                $('#result_select').html(inner.join(''));   //数组合并
                
                //删除
                $("#result_select li").click(function(){
                	var li_id = $(this).attr("data-id");
                	alert(li_id)
                	delete trouble_selected_data[li_id];
                	$(this).remove();
                	console.log(trouble_selected_data); //返回最新删除后的结果;
                })
			}
		})
	})
</script>

 

html如下:

这里注意,为了后续保证排除数据的唯一性,我给每个option给了给data-id。在js中,我是这样判断的:if (this_id in trouble_selected_data == true ),【对象基础知识:判断对象是否含有某属性,in 操作符,返回 true 或 false。】

<div class="row">
    <div class="col-sm-6" >      
         <div class="form-group">
            <div class="fg-line">
                <select class="chosen" id="trouble_selected">
                  <option>请选择故障描述</option>
                  <option data-id="fdjyx">发动机异响故障</option>
                  <option data-id="fdjzs">发动机转速过高故障</option>
                  <option data-id="bsxgd">变速箱挂挡故障</option>
                  <option data-id="scpyx">刹车片异响故障</option>
                </select>
            </div>
         </div> 
    </div>
    <div class="col-sm-6 p-t-5" >     
        <ul id="result_select"></ul>
    </div>  
</div>

css如下: 

#result_select li{ position:relative; cursor: pointer; float:left; margin-left: 20px; margin-bottom: 20px; padding: 0px 7px 0px 15px; width:150px;  border: 1px solid #ccc;}
#result_select li:hover{background: #d0f0f8; border: 1px solid #7fd9ef;}
#result_select li > div{ width: 105px; height: 32px; line-height: 32px; overflow: hidden; white-space:nowrap; text-overflow:ellipsis; }
#result_select li i{ position: absolute; top: 10px; right: 3px; width: 20px; height: 20px; }

 

篇外话:

每次的博客,后续读,都会觉得有可以再优化的部分,此例也不例外,在去重后,写入对象,

这里是① 遍历对象   ② 添加到数组  ③ 然后通过html()写到结果区中。这里太过复杂~~~~~

for (var y in obj) {    
  $('#reasult-list ul').append('<li data-id="' + y + '">' + obj[y] + '</li>')
}

简单的版本,详见 jquery-动态获取-存到数组-存到对象,稍后几天更新。。。。。

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 159
码字总数 86178
作品 0
宁波
前端工程师
Object-C学习笔记(三)

住院好几天了。昨天刚安上无线网卡,写了半天笔记结果破输入法死机白忙活了,还得重搞。 NSArray 是Cocoa的一个类,用于存放对象,这个类不可以直接存放C中数据类型的数据,需要转换成Objec...

logbird
2012/12/16
0
0
【原创】jquery-左勾选(checkbox单选/全选) 选到 右列表(删除) -数组+clone-经典全面版本

前言 实际工作中,此模型经常会遇到过,今天花点时间,整理下思路,做了一个较为全面的demo。以备将来回忆使用。 思考(特别注意) 此例只是将data-id获取过来,放到数组里,然后clone元素。...

柴高八斗之父
2017/10/31
0
0
【JavaSE(九)】Java集合框架(上)

原文地址:https://www.cloudcrossing.xyz/post/41/ 1 对象数组 数组既可以存储基本数据类型,也可以存储引用类型。它存储引用类型时的数组就叫对象数组。 举个例子:我有5个学生,请把这个5...

苍云横渡
05/24
0
0
JavaScript 常用基础知识

1、数据类型: 1)原始类型: String Boolean Number Null Undefiend 2)引用类型:Object .......... 总结:为什么老生常谈数据类型呢?在开发中他们到底数据类型有什么指引,我从不纠结Nul...

learn_more
2014/11/08
0
0
Java面试相关---集合

清枫_小天
2016/08/08
0
0
C++ Primer 第三版 读书笔记

1.如果一个变量是在全局定义的,系统会保证给它提供初始化值0。如果变量是局部定义的,或是通过new表达式动态分配的,则系统不会向它提供初始值0 2.一般定义指针最好写成:" string p; " 而不...

walb呀
2017/12/05
0
0
JavaScript 记录

原文 虽然 script 标签有个type属性,但是其默认是javascript。所以这个属性是必要的。 如果你写js语句不加分号,浏览器javascript引擎会自动在js语句后加";"号,但某些情况下由浏览器加分号会...

中柠檬
2016/12/23
38
0
Kotlin 基本数据类型(三)

Kotlin 基本数据类型(三) 上一次大家学会了创建你的第一个Kotlin应用 Kotlin 快速创建您的第一个应用(二) Kotlin 基本数据类型: Kotlin 的基本数值类型包括 Byte、Short、Int、Long、F...

Diosamolee
01/01
0
0
ECMAScript Set和Map数据结构

Set 基本用法 ES6提供了新的数据结构Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 Set本身是一个构造函数,用来生成Set数据结构。 通过 add 方法向Set结构加入成员,结果表明...

墨马
2017/10/31
0
0
JavaScript 新手的踩坑日记

引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字。由于商标问题以及很多产品已经使用了 Live 的前缀,网...

一缕殇流化隐半边冰霜
2017/05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

OSChina 周一乱弹 —— 如果是你喜欢的女同学找你借钱

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @guanglun :分享Michael Learns To Rock的单曲《Fairy Tale》 《Fairy Tale》- Michael Learns To Rock 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
10分钟前
1
1
NNS域名系统之域名竞拍

0x00 前言 其实在官方文档中已经对域名竞拍的过程有详细的描述,感兴趣的可以移步http://doc.neons.name/zh_CN/latest/nns_protocol.html#id30 此处查阅。 我这里主要对轻钱包开发中会用到的...

暖冰
今天
0
0
32.filter表案例 nat表应用 (iptables)

10.15 iptables filter表案例 10.16/10.17/10.18 iptables nat表应用 10.15 iptables filter表案例: ~1. 写一个具体的iptables小案例,需求是把80端口、22端口、21 端口放行。但是,22端口我...

王鑫linux
今天
0
0
shell中的函数&shell中的数组&告警系统需求分析

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

影夜Linux
今天
0
0
Linux网络基础、Linux防火墙

Linux网络基础 ip addr 命令 :查看网口信息 ifconfig命令:查看网口信息,要比ip addr更明了一些 centos 7默认没安装ifconfig命令,可以使用yum install -y net-tools命令来安装。 ifconfig...

李超小牛子
今天
1
0
[机器学习]回归--Decision Tree Regression

CART决策树又称分类回归树,当数据集的因变量为连续性数值时,该树算法就是一个回归树,可以用叶节点观察的均值作为预测值;当数据集的因变量为离散型数值时,该树算法就是一个分类树,可以很...

wangxuwei
昨天
1
0
Redis做分布式无锁CAS的问题

因为Redis本身是单线程的,具备原子性,所以可以用来做分布式无锁的操作,但会有一点小问题。 public interface OrderService { public String getOrderNo();} public class OrderRe...

算法之名
昨天
11
0
143. Reorder List - LeetCode

Question 143. Reorder List Solution 题目大意:给一个链表,将这个列表分成前后两部分,后半部分反转,再将这两分链表的节点交替连接成一个新的链表 思路 :先将链表分成前后两部分,将后部...

yysue
昨天
1
0
数据结构与算法1

第一个代码,描述一个被称为BankAccount的类,该类模拟了银行中的账户操作。程序建立了一个开户金额,显示金额,存款,取款并显示余额。 主要的知识点联系为类的含义,构造函数,公有和私有。...

沉迷于编程的小菜菜
昨天
1
0
从为什么别的队伍总比你的快说起

在机场候检排队的时候,大多数情况下,别的队伍都要比自己所在的队伍快,并常常懊悔当初怎么没去那个队。 其实,最快的队伍只能有一个,而排队之前并不知道那个队快。所以,如果有六个队伍你...

我是菜鸟我骄傲
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部