日期:2014-05-16  浏览次数:20328 次

js实现带输入提示的文本框



?项目上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});

?

?

?