【原创】操作chosen-获取值到对象-遍历对象以数组的方式追显-删除对象数据
【原创】操作chosen-获取值到对象-遍历对象以数组的方式追显-删除对象数据
柴高八斗之父 发表于3个月前
【原创】操作chosen-获取值到对象-遍历对象以数组的方式追显-删除对象数据
  • 发表于 3个月前
  • 阅读 13
  • 收藏 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-动态获取-存到数组-存到对象,稍后几天更新。。。。。

标签: chosen
共有 人打赏支持
粉丝 4
博文 135
码字总数 54165
×
柴高八斗之父
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: