JQuery---下拉选择框初始化

绝地灬酷狼 2023-06-21 08:49 39阅读 0赞

<html>
    	<head>
    		
    		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     
    		
    		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    		 
    		
    		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    				
    		
    		<script src="layDate5\laydate\laydate.js"></script>	
    		
    
    		<style>
    			.sel,.in{
    				margin-top:50px;
    				margin-left:5px;
    				width:100px;
    				height:30px;
    			}
    			
    		</style>
    	</head>
    	<body>
    		
    		
    		<select class="sel">
    			<option value=2 selected='selected'>22</option>
    		</select>
    		
    		
    		<input type="text" class="in">
    			
    		
    		<button class="btn btn-primary quer">query</button>
    	</body>
    </html>
    
    <script>
    
    	//日期选择框赋初始值
    	$('.in').val('2019-12-10');
    	
    	//layDate
    	laydate.render({
    	  elem: '.in'
    	}); 
    
    
    
    
    	//定义下拉框要赋的初始值
    	var options = [
    		{name : '全部',value : '0'},
    		{name : '50ETF',value : '510050'},
    		{name : '300ETF',value : '510300'}
    	];
    	
    	//下拉框初始化赋值 函数
    	var selectInit = function($ele,data){
    		var optio = '';
    		for(var i=0;i<data.length;i++){
    			if(data[i].name == '全部'){			//默认选中的值
    				optio = optio + '<option selected="selected" value='+ data[i].value +'>'+ data[i].name +'</option>';
    			}else{
    				optio = optio + '<option value='+ data[i].value +'>'+ data[i].name +'</option>';
    			}
    		}
    		$ele.html(optio);
    	}
    	
    	//调用 下拉框初始化赋值 函数
    	selectInit($('.sel'),options);
    	
    	
    	//点击按钮
    	$('.quer').click(function(){
    		var selVal = $('.sel').val();		//获取下拉框选择的值
    		var inpVal = $('.in').val();		//日期选择框的值
    		alert(selVal + ' ' + inpVal);
    	});
    	
    	
    	
    	
    	
    	
    	
    	
    </script>