文档章节

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

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

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

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

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

柴高八斗之父
2017/08/29
0
0
【原创】jquery-左勾选(checkbox单选/全选) 选到 右列表(删除) -数组+clone-经典全面版本

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

柴高八斗之父
2017/10/31
0
0
JavaSE|集合类、Collection、Iterator

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/darlingwood2013/article/details/83376830 JavaSE|JavaSE|集合类、Collection、Iterator 集合类概述 Collec...

叶晚林
10/26
0
0
Set & Map:新生的数据集合及其弱引用衍生

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

wmaker
08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

存储过程知识点收集

记录下,以后要常用的问题 1、获取刚刚插入数据产生的ID SCOPE_IDENTITY 返回当前作用域的插入后产生的一条ID @@IDENTITY 返回当前表的最后一条ID

轻轻的往前走
14分钟前
0
0
elixir keyword和map的区别

┌──────────────┬────────────┬───────────────────────┐ │ Keyword List │ Map/Struct │ HashDict (deprec...

wmzsonic
17分钟前
0
0
解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-show-columns="true" data-fixed-columns="true" data-fixed-number="3"></table> 含有dat......

tianyawhl
19分钟前
0
0
ES6 系列之 defineProperty 与 proxy

摘要: ## 前言 我们或多或少都听过“数据绑定”这个词,“数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:`var obj = {value: 1}`,我们该怎么知道 obj 发生了改变呢? ## def...

阿里云官方博客
25分钟前
0
0
美团点评携手 PingCAP 开启新一代数据库深度实践之旅(9000 字长文 / 真实“踩坑”经历)

一、背景和现状 在美团,基于 MySQL 构建的传统关系型数据库服务已经难于支撑公司业务的爆发式增长,促使我们去探索更合理的数据存储方案和实践新的运维方式。随着近一两年来分布式数据库大放...

TiDB
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部