文档章节

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

柴高八斗之父
 柴高八斗之父
发布于 2017/09/04 20:36
字数 705
阅读 20
收藏 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
博文 184
码字总数 102500
作品 0
宁波
前端工程师
Object-C学习笔记(三)

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

logbird
2012/12/16
0
0
【原创】数组完整篇 / 基本操作/ 进阶 / 遍历 / 实例 / 拓展 / 取 / 赋

【基础】数组基本操作 数组的常见基本操作分为:赋值,查长度,添加push,删除delete,遍历for-in等。简单数组是一维的,但是实际工作中,数组总是与对象结合使用,叫:数组对象。 类型操作分...

柴高八斗之父
2017/08/29
0
0
Set & Map:新生的数据集合及其弱引用衍生

前言 ES6新增了两种基本的原生数据集合:和(加上和现在共有四种),以及由两者衍生出的弱引用集合:和。从某个不无狭隘的角度看(不无狭隘?到底有多狭隘多不狭隘呢?),更为类似集合的某种...

wmaker
08/10
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

没有更多内容

加载失败,请刷新页面

加载更多

学hadoop需要什么基础

最近一段时间一直在接触关于hadoop方面的内容,从刚接触时的一片空白,到现在也能够说清楚一些问题。这中间到底经历过什么只怕也就是只有经过的人才会体会到吧。前几天看到有个人问“学hadoo...

左手的倒影
5分钟前
0
0
LOADING Redis is loading the dataset in memory

Redis出现错误 LOADING Redis is loading the dataset in memory 原因是: redis中dump.rdb文件到达3G时,所有redis的操作都会抛出此异常。 解决方法: redis.conf中 maxmemory 调大。 另外一...

swingcoder
6分钟前
0
0
闪屏页设置

相信每个app都需要一个闪屏页 就是一个开始页面 对于新手来说 可能就直接一个activity 弄个背景图片 ,细心地同学也许会发现 每次启动 应用程序的时候 一开始显示的不是那个设置的背景图片 ...

王先森oO
11分钟前
0
0
解析Excel

import java.io.File;import java.io.FileInputStream;import java.io.IOException;import java.io.InputStream;import java.util.ArrayList;import java.util.List;import or......

开源中国封号找我
15分钟前
0
0
pandas不能在pycharm中使用plot()方法显示图像的解决方法

最近用了pycharm,感觉还不错,就是pandas中Series、DataFrame的plot()方法不显示图片就给我结束了,但是我在ipython里就能画图 以前的代码是这样的 import matplotlib.pyplot as pltfrom p...

kipeng300
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部