jquery_动态显示下拉框_on()绑定事件_each遍历每个子元素

//参考：https://blog.csdn.net/chenhao_c_h/article/details/79750341


/**************************HTML***************************************/
<span>
    <span>日期类型：</span>
	<select id="dateType" name="dateType">
		<option value="" >--全部--</option>
		<#list dateTypeEnumList as dateTypeEnum>
			<option value="${dateTypeEnum.getId()}">${dateTypeEnum.getName()}</option>
		</#list>
	</select>
</span>
<span>
    <span>日期名称：</span>
	<select id="dateName" name="dateName">
		<option value="" >--全部--</option>
		<#list dataNameList as dataName>
			<option value="${dataName.holidayType}">${dataName.holidayName}</option>
		</#list>
	</select> 
</span>



/********************jquery****************控制option************************/
	/*
	onchange事件是你设置的元素改变的时候触发的事件；
	而on事件则是用于事件绑定，即你所设置的元素可能在替换的时候遗失了，
可以用on事件来将元素的事件通过元素不变的父级元素进行绑定，来达到替换后
事件不遗失，可以继续使用的目的；
	*/
	$("#dateType").on("change",function(){   、
         let dateTypeOption = $("#dateType").val();
         myOption(dateTypeOption);
    });  
    $("#dateName").on("change",function(){
        let dateNameOption = $("#dateName").val();
        $('#dateType option').each(function(){ 
        	if($(this).val()==dateNameOption){
        		$("#dateType").val(dateNameOption);
        	}
        })
   });  
   function myOption(dateTypeOption){
    	$('#dateName option').each(function(){ 
	   		 if(dateTypeOption==''){   //动态显示对应项
    			 this.className='show';
    		 }else if(!($(this).val() == dateTypeOption)){
	   			 this.className='hide';
	   		 }else{
	   			 this.className='show';  
	   		 }
   	 	});  
    	$("#dateName").val($("#dateName").find(".show").eq(0).val());  //取第一个元素选项展示
   	 	$('#dateName').trigger("chosen:updated"); //刷新选项
    }