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="100%;max-400px;height: 400px;">
<div style="margin-bottom:20px">
<input id="datePicker" class="easyui-datebox" label="日期:" data-options="formatter:formatterDate,parser:myparser" labelPosition="top" style="100%;">
</div>
<div style="margin-bottom:20px">
<select id="monthSelect" class="easyui-combobox" name="month" label="月份:" labelPosition="top" style="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）操作日期控件
（2）操作下拉框
