李炎恢_PHP_jQuery EasyUI[024] ~ Combo(自訂下拉清單)組件
李炎恢_PHP_jQuery EasyUI[024] ~ Combo(自訂下拉清單)組件
參考資料: https://github.com/jash-git/jash-WebSI
GITHUB: https://github.com/jash-git/richie_jQuery_EasyUI
My code:
$(function () {
$('#box').combo({
//width : 300,
//height : 50,
//panelWidth : 300,
//panelHeight : 300,
//editable : false,
//disabled : true,
//readonly : true,
//hasDownArrow : false,
//value : '123',
//delay : 1000,
/*
onShowPanel : function () {
alert('显示触发');
},
onHidePanel : function () {
alert('隐藏触发');
},
onChange : function (newValue, oldValue) {
alert(newValue + '|' + oldValue);
},
*/
required : true,
});
$('#food').appendTo($('#box').combo('panel'));
$('#food input').click(function () {
var v = $(this).val();
var s = $(this).next('span').text();
$('#box').combo('setValue', v).combo('setText', s).combo('hidePanel');
});
//console.log($('#box').combo('textbox'));
$(document).click(function () {
//$('#box').combo('resize', 'width');
//$('#box').combo('showPanel');
//console.log($('#box').combo('isValid'));
//console.log($('#box').combo('getText'));
//console.log($('#box').combo('getValue'));
$('#box').combo('setValues', ['1','2','3']);
console.log($('#box').combo('getValues'));
});
});
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="../../easyui_15/jquery.min.js"></script> <script type="text/javascript" src="../../easyui_15/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui_15/locale/easyui-lang-zh_TW.js" ></script> <script type="text/javascript" src="js/index.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui_15/themes/icon.css" /> </head> <body> <input id="box"> <div id="food"> <div style="background:#eee;padding:5px;">请选择一个食物</div> <div class="padding:5px;"> <input type="radio" name="food" value="01"><span>煎饼果子</span><br> <input type="radio" name="food" value="02"><span>牛腩米线</span><br> <input type="radio" name="food" value="03"><span>水果沙拉</span><br> <input type="radio" name="food" value="04"><span>蛋黄派</span><br> <input type="radio" name="food" value="05"><span>其他</span><br> </div> </div> </body> </html>
PDF:
執行結果:
