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

声明：例子的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-动态获取-存到数组-存到对象，稍后几天更新。。。。。