jquery_select+option专题

最新推荐文章于 2024-07-30 03:18:18 发布

zs_life

最新推荐文章于 2024-07-30 03:18:18 发布

阅读量395

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/zs_life/article/details/91898914

版权

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<span>
    <span>日期类型：</span>
	<select id="dateType" name="dateType">
	    <option value="" >全部</option>
		<option value="123" >假日</option>
		<option value="0" >平日</option>
	</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>

   
    /**************新增*****************日期类型选择*************start***********/
    $("#dateType").on("change",function(){
         let dateTypeOption = $("#dateType").val();
         myOption(dateTypeOption);
    });  
    $("#dateName").on("change",function(){
        let dateNameOption = $("#dateName").val();
        if(dateNameOption != ""){
	        $('#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)){
    			 if($(this).val()==""){
    				 this.className='show';
    			 }else{
    				 this.className='hide';
    			 }
	   		 }else{
	   			 this.className='show';  
	   		 }
   	 	});  
    	$("#dateName").val($("#dateName").find(".show").eq(0).val());
   	 	$('#dateName').trigger("chosen:updated"); 
    }
   /**************新增*****************日期类型选择*************end***********/





    //contains()可以匹配多个--->%dateNameValue%----即多个value值相似的被选中
    $("#dateName option:contains("+dateNameValue+")").attr('selected', true); 

    //(不会显示(即不会选中)：selected="selected"，) 但依然可以定位文本变量值dateNameValue
    $("#dateName").find("option").filter(function(index) {
   		return dateNameValue === $(this).text();
   	}).prop("selected", "selected"); 
 
    //(会显示(会被选中)：selected="selected" )
   	$("#dateName").find("option").filter(function(index) {
    	return dateNameValue === $(this).text();
    }).attr("selected", "selected");

//使select选择无效
<select id="idType" class="form-control" name="idType"  onfocus="this.defaultIndex=this.selectedIndex;" onchange="this.selectedIndex=this.defaultIndex;">