第一个地区的下拉和第二个部门为二级联动，部门为后台动态传过来的。

页面html代码：

<div class="select1">
                        <select id="area">
                            <option value="0">地区</option>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                        </select>
                    </div>
<div class="select1">
                        <select   id="department">
                            <option value="0">部门</option>
                            
                            
								<option value="36" data-area="1" style="display: none;">部门A</option>
								<option value="40" data-area="2" style="display: none;">部门B</option>
								<option value="1" data-area="2" style="display: none;">部门C</option>
								<option value="2" data-area="1" style="display: none;">部门D</option>
								<option value="3" data-area="1" style="display: none;">部门E</option>
                            
                            
                        </select>
                    </div>

在Safari浏览器下style=”display: none;”不生效，即使加了display:none在Safari下依然显示。

解决办法：

<div class="select1">
                        <select id="area2">
                            <option value="0">地区</option>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                        </select>
                    </div>
<div class="select1">
                        <select   id="department2">
                            <option value="0">部门</option>
                            
                            
                            
                        </select>
                    </div>


    <script type="text/javascript">
    	
    	var xx=[];
    	$('#div1 ul li').each(function(){
    		xx.push({
    			'id':$(this).attr('data-id'),
    			'area':$(this).attr('data-area'),
    			'name':$(this).html()
    		});
    	});

    	console.log('--',xx);


    	//选择地区的下拉带动部门的变化
	$('#area2').change(function(){
		var department_area=$(this).val();
		//console.log('---' ,  department_area);
		
		var html='';
		for(var i=0;i<xx.length;i++){
			var area2=xx[i].area;
			if(department_area==area2){
				html+='<option value="'+xx[i].id+'" data-area="'+xx[i].area+'"  >'+xx[i].name+'</option>';
			}
		}

		$('#department2').html('<option value="0">部门</option>'+html);


	});
    </script>