EasyUI之下拉框combobox

太过爱你忘了你带给我的痛 2022-07-15 13:22 286阅读 0赞

1、实例背景

EasyUI下拉框combobox，实例给出一个日期控件和一个下拉框，选择日期控制下拉框的月份；改变下拉框选项就改变日期的月份。

2、实例源码

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>EasyUI之下拉框combobox</title>
    		<link rel="stylesheet" href="../themes/black/easyui.css" />
    		<link rel="stylesheet" href="../themes/icon.css" />
    		<link rel="stylesheet" href="../css/demo.css" />
    		<script type="text/javascript" src="../js/jquery.min.js" ></script>
    		<script type="text/javascript" src="../js/jquery.easyui.min.js" ></script>
    		<script>
    			$(document).ready(function(){
    				$("#datePicker").datebox({
    					onSelect:function(date){
    						$("#monthSelect").combobox("setValue",date.getMonth()+1);
    					}
    				});
    				
    				$("#monthSelect").combobox({
    					onChange:function(n,o){
    						var date = new Date();
    						var month = $(this).combobox("getValue");
    						var year = date.getFullYear();
    						var day = date.getDate();
    						var changeMonth = year + "-" + (month<10?("0"+month):month) + "-" + (day<10?"0"+day:day);
    						
    						$("#datePicker").datebox("setValue",changeMonth);
    					}
    				});
    			});
    			
    			function formatterDate(date)
    			{
    	            var y = date.getFullYear();
    	            var m = date.getMonth()+1;
    	            var d = date.getDate();
    	            return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
    	        }
    			
    	        function myparser(s)
    	        {
    	            if (!s) return new Date();
    	            var ss = (s.split('-'));
    	            var y = parseInt(ss[0],10);
    	            var m = parseInt(ss[1],10);
    	            var d = parseInt(ss[2],10);
    	            if (!isNaN(y) && !isNaN(m) && !isNaN(d))
    	            {
    	                return new Date(y,m-1,d);
    	            } 
    	            else 
    	            {
    	                return new Date();
    	            }
    	        }
    		</script>
    	</head>
    	<body>
    		<div class="easyui-panel" style="width:100%;max-width:400px;height: 400px;">
    			<div style="margin-bottom:20px">
    	            <input id="datePicker" class="easyui-datebox" label="日期:" data-options="formatter:formatterDate,parser:myparser" labelPosition="top" style="width:100%;">
    	        </div>
    	        <div style="margin-bottom:20px">
    	            <select id="monthSelect" class="easyui-combobox" name="month" label="月份:" labelPosition="top" style="width:100%;">
    	                <option value="1">一月</option>
    	                <option value="2">二月</option>
    	                <option value="3">三月</option>
    	                <option value="4">四月</option>
    	                <option value="5">五月</option>
    	                <option value="6">六月</option>
    	                <option value="7">七月</option>
    	                <option value="8">八月</option>
    	                <option value="9">九月</option>
    	                <option value="10">十月</option>
    	                <option value="11">十一月</option>
    	                <option value="12">十二月</option>
    	            </select>
    	        </div>
    	    </div>
    	</body>
    </html>

3、实例结果

（1）操作日期控件

![Image 1][]

（2）操作下拉框

![Image 1][]

[Image 1]: