关于EasyUI ComboBox(下拉列表框)能否直接输入文本的问题，详情如图所示。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于EasyUI ComboBox(下拉列表框)能否直接输入文本的问题，详情如图所示。相关的知识，希望对你有一定的参考价值。
参考技术A <script type="text/javascript">function doFn(obj)
var txt = $(obj).val();//取得当前文本
if(txt=="禁用")
$("#comboboxid").combobox("disable");//禁用combobox
$(obj).val("启用");
else
$("#comboboxid").combobox("enable");//启用combobox
$(obj).val("禁用");
</script>
<head>
<body>
<select id="comboboxid" class="easyui-combobox" style="width:100px;">
<option value="aa">item1</option>
<option value="bb">item2</option>
</select>
<input type="button" value="禁用" onclick="doFn(this);"/>
</body>追问
不是禁用/启用控件，而是控制能不能直接输入。就是加载完成后，点击按钮，则用户只能从下拉列表中选择一个，而不能手动输入；再点击按钮，用户便可以手动输入。这样描述明白吗？
追答
function doFn(obj)
var txt = $(obj).val();//取得当前文本
if(txt=="禁用")
$("#comboboxid").combobox("editable":false);//combobox不能输入
$(obj).val("启用");
else
$("#comboboxid").combobox("editable":true);//combobox可输入
$(obj).val("禁用");
item1
item2
基于jquery扩展漂亮的下拉框——ComboBox
关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼，现在分享这个控件，希望有用的同仁们可以收藏，或进行二次修改，达到你想要的效果。
分解自定义下拉框：
1。创建构造函数，初始化赋值控件值。
2。绑定控件呈现在前台。
3。点击下拉框控件，展示下拉列表
4。点击触发下拉框控件，收起下拉列表。
5。点击下拉项触发事件。
代码如下：
Html代码：
1 <b class="select_type"></b>
css样式：
1 .dropdown span a{float:left;background:url(/img/Icon_BG.png);} 2 /*下拉框 http://power.76741.com*/ 3 .dropdown span a{background-position: -213px -75px;} 4 .dropdown{float:left;width:105px;} 5 .dropdown span{border:solid 1px #ccc;width:95%;height:28px;background:url(/img/tbline_bg.png);border-radius:8px;overflow:hidden;} 6 .dropdown span{float:left;padding-left:10px;line-height:28px; cursor:pointer;} 7 .dropdown span.active{border-radius:8px 8px 0px 0px;} 8 .dropdown span font{width:auto;margin-right: 0px;float:left;} 9 .dropdown span a{float:right;width:20px;height:20px;margin:4px 0;} 10 .dropdown p{border:solid 1px #ccc;border-top:0px;width:103px;display:none;position:absolute;margin-top:28px;background-color:#fff;z-index:3;max-height:280px;overflow-y: auto; overflow-x: hidden;} 11 .dropdown p a{float:left;line-height:28px;height:28px;padding-left:10px;color:#666;font-size:14px;cursor:default;text-align:left;width:100%;overflow:hidden;} 12 .dropdown p a:hover{background:url(/img/tbline_bg.png);color:#666;}
Js代码：
1。自定义类：
1 //下拉框 2 var ComboBox = function () { 3 this.tag; 4 this.data_default; 5 this.data_list; 6 this.index = 0; 7 8 var _this = this; 9 var _index, _tag, _value; 10 //初始化 11 this.init = function () { 12 _tag = _this.tag; 13 _index = _this.index; 14 //设置对象 15 _this.setDropdown(_this.data_default, _this.data_list); 16 //赋值绑定事件 17 if (_tag.find(‘span font‘).length > 0) _value = _tag.find(‘span font‘).attr(‘_id‘); 18 if (_tag == undefined) { return false; } 19 _this.showEvent(); 20 _this.selectedIndex(_index); 21 return true; 22 } 23 //设置下拉列表 24 this.setDropdown = function (default_data, list) { 25 var css = _tag.attr(‘class‘); 26 if (default_data == undefined) { 27 default_data = { id: ‘null‘, name: ‘‘ }; 28 } 29 var _html = ‘‘; 30 if (_tag.find(‘p‘).length > 0 && _tag.find(‘span‘).length > 0) { 31 $.each(list, function (i, value) { 32 _html += ‘<a _id="‘ + value.id + ‘">‘ + value.name + ‘</a>‘; 33 }); 34 _tag.find(‘span font‘).replaceWith(‘<font _id="‘ + default_data.id + ‘">‘ + default_data.name + ‘</font>‘); 35 _tag.find(‘p‘).html(_html); 36 } else { 37 _html = ‘<div class="dropdown ‘ + css + ‘">‘; 38 _html += ‘<span><font _id="‘ + default_data.id + ‘">‘ + default_data.name + ‘</font><a></a></span>‘; 39 _html += ‘<p>‘; 40 if (list) { 41 $.each(list, function (i, value) { 42 _html += ‘<a _id="‘ + value.id + ‘">‘ + value.name + ‘</a>‘; 43 }); 44 } 45 _html += ‘</p>‘; 46 _html += ‘</div>‘; 47 var parent = _tag.parent(); 48 _tag.replaceWith(_html); 49 _tag = parent.find(‘.dropdown‘ + (css.length > 0 ? ‘.‘ + css.replace(‘ ‘, ‘.‘) : ‘‘)); 50 } 51 } 52 //下拉事件 53 this.showEvent = function () { 54 _tag.find(‘span‘).unbind(‘click‘).click(function () { 55 var p = $(this).parent().find(‘p‘); 56 if (p.css(‘display‘) == ‘block‘) { 57 p.css(‘display‘, ‘none‘); 58 $(this).removeClass(‘active‘); 59 } else if (p.html().length > 0) { 60 p.css(‘display‘, ‘block‘); 61 $(this).addClass(‘active‘); 62 } 63 }); 64 } 65 //选中事件 66 this.selectedIndex = function (index) { 67 _tag.find(‘p a‘).unbind(‘click‘).click(function () { 68 var parent = $(this).parent().parent(); 69 //给下拉框赋值 70 if ($(this).text().length > 0) { 71 var font = parent.find(‘font‘); 72 font.text($(this).text()); 73 font.attr("_id", $(this).attr(‘_id‘)); 74 _this.selectedIndexExpand(parent, $(this).index()); 75 parent.find(‘span‘).removeClass(‘active‘); 76 } 77 parent.find(‘p‘).css(‘display‘, ‘none‘); 78 }); 79 if (_tag.find(‘p a‘).length <= _index) _index = 0; 80 if (_value && _value != ‘‘) { 81 _index = _tag.find(‘p a[_id="‘ + _value + ‘"]‘).index(); 82 } 83 _tag.find(‘p a:eq(‘ + _index + ‘)‘).click(); 84 } 85 //选中事件扩展 86 this.selectedIndexExpand = function (tag, index) { } 87 }
2。示例代码：
1 var array_state = [{ id: -1, name: ‘状态‘ }, { id: 1, name: ‘未成功‘ }, { id: 2, name: ‘成功‘ }, { id: 3, name: ‘失败‘}]; 2 //状态下拉控件 3 var select_type = new ComboBox(); 4 select_type.tag = $(‘.select_type‘); 5 select_type.data_default = array_state[0]; 6 select_type.data_list = array_state; 7 select_type.selectedIndexExpand = function (tag, index) { 8 //fun_Pager(); 9 } 10 select_type.init();
3.示例图：
4.下载地址：http://www.tiaoceng.com/assemblydetail_5.html
以上是关于关于EasyUI ComboBox(下拉列表框)能否直接输入文本的问题，详情如图所示。的主要内容，如果未能解决你的问题，请参考以下文章
如何能实现easyui-combobox中的值change事件？
easyui 下拉列表只能选中第一个，就是能看到下拉框的值，可是你选择那个它框框里都是第一个
EasyUI combobox下拉列表实现搜索过滤（模糊匹配）
EasyUI的combobox控件使用onchange事件之后，输入文本的时候下拉列表框检索功能不再可用。
easyui combobox中的值是从数据库拿过来的,编辑easyui gridveiw时combobox定位gridveiw对应值