js---html下拉框初始化

<html>
	<head>
		<!-- Bootstrap CSS -->
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
		<!-- jQuery -->
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		 
		<!-- Bootstrap JavaScript -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
				
		<!-- layDate -->
		<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>
发布了62 篇原创文章 · 获赞 25 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_39115469/article/details/103499324