easyui-combobox 改变下拉框高度

1 select

属性名 属性值类型 描述 默认值
width number 组件的宽度。 auto
height number 组件的高度。(该属性自1.3.2版开始可用) 22
panelWidth number 下拉面板宽度。 null
panelHeight number 下拉面板高度。 200
panelMinWidth number 下拉面板最小宽度。(该属性自1.4版开始可用) null
panelMaxWidth number 下拉面板最大宽度。(该属性自1.4版开始可用) null
panelMinHeight number 下拉面板最小高度。(该属性自1.4版开始可用) null
panelMaxHeight number 下拉面板最大高度。(该属性自1.4版开始可用) null
panelAlign string 面板对齐方式。可用值有:’left’,’right’。(该属性自1.3.6版开始可用) 200
multiple boolean 定义是否支持多选。 false
selectOnNavigation boolean 定义是否允许使用键盘导航来选择项目。(该属性自1.3.3版开始可用) true
separator string 在多选的时候使用何种分隔符进行分割。 ,
editable boolean 定义用户是否可以直接输入文本到字段中。 true
disabled boolean 设置启用/禁用字段。 false
readonly boolean 设置该字段为读写/只读模式。(该属性自1.3.3版开始可用) false
hasDownArrow boolean 定义是否显示向下箭头按钮。 true
value string 字段的默认值。
delay number 最后一次输入事件与执行搜索之间的延迟间隔(执行自动完成功能的延迟间隔) 200
keyHandler object 在用户按下键的时候调用一个函数。该按键处理器被定义为:
keyHandler: {
up: function(){},
down: function(){},
enter: function(){},
query: function(q){}
}

<select class="easyui-combobox"  panelMaxHeight="200px" 
data-options="editable:false,panelHeight:'auto'"
name="info[business]" style="height: 24px">
<foreach name="dw_business" key="businessid" item="business_name">
<option value="<{$business_name}>"><{$business_name}></option>
</foreach>
</select>

2 input

<input class="easyui-combobox" id="dd"
            name="language"
            url="combobox_data.json" 
            valueField="id" 
            textField="text" 
            multiple="true" 
            panelHeight="300">

注:转译\

'<select id="'+domId+'" class="easyui-combobox" name="dept" style="width:130px;" panelMaxHeight="200px" data-options="editable:false,panelHeight:\'auto\'">'
                                    +options+'</select>'
easyui combobox下拉框默认是单选的,如果要实现多选,需要做以下修改: 1. 在combobox的options中添加multiple:true,表示启用多选模式。 2. 在combobox的options中添加onSelect和onUnselect两个事件,用于在选择和取消选择时更新选中的值。 3. 在combobox的panel中添加checkbox或者复选框,用于选择多个选项。 以下是实现多选的示例代码: HTML代码: ``` <input id="cc" class="easyui-combobox" style="width:200px;"> ``` JavaScript代码: ``` $('#cc').combobox({ url: 'get_data.php', valueField: 'id', textField: 'text', multiple: true, panelHeight: 'auto', onSelect: function(record){ var value = $(this).combobox('getValues'); value.push(record.id); $(this).combobox('setValues', value); }, onUnselect: function(record){ var value = $(this).combobox('getValues'); var index = value.indexOf(record.id); if (index >= 0){ value.splice(index, 1); } $(this).combobox('setValues', value); }, onLoadSuccess: function(){ var data = $(this).combobox('getData'); var value = $(this).combobox('getValues'); var panel = $(this).combobox('panel'); panel.find('.combo-panel-checkbox').remove(); $.each(data, function(index, item){ var checkbox = $('<input type="checkbox" class="combo-panel-checkbox">').val(item.id); if (value.indexOf(item.id) >= 0){ checkbox.prop('checked', true); } checkbox.insertBefore(panel.find('.combo-panel-list')); }); }, onShowPanel: function(){ var data = $(this).combobox('getData'); var value = $(this).combobox('getValues'); var panel = $(this).combobox('panel'); panel.find('.combo-panel-checkbox').prop('checked', false); $.each(data, function(index, item){ if (value.indexOf(item.id) >= 0){ panel.find('.combo-panel-checkbox[value="'+item.id+'"]').prop('checked', true); } }); } }); ``` 注:示例代码中的get_data.php是一个返回JSON格式数据的接口,可以根据实际情况修改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值