项目上page方面要实现一个功能,文本框的值,可以通过下拉列表选择,之后再编辑。
在网上search了很多方法,其中包括jquery的autocomplete插件,但是发现那个必须输入一个值后才出现下拉列表,(网友推荐的minChars为0不起效果);最后通过有个网友的思路,将文本框覆盖到下拉列表上面,只显示最右边三角箭头,自己动手写了下js,终于实现了,发现效果还不错^^
目 标:文本框的值,可以通过下拉列表选择,也可以输入
实现方法:将文本框覆盖到下拉列表上面,只显示最右边三角箭头
<select id="choReason" style="width:320px;height:19px">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
<input type="text" id="reason" style="width:302px;height:17px">
</input>
$("#choReason").change(function () { var v1 = $("#choReason option:selected").text(); if (v1 != null) { $("#reason").val($("#choReason option:selected").text()); } }); $("#reason").offset({top: $("#choReason").offset().top, left: $("#choReason").offset().left});