`
hrc200808
  • 浏览: 545 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

可选择可输入的select

阅读更多
(function($){
		$.fn.selectbox = function(){
			//用变量idm存储select的id或name
			var idm = $(this).attr("id") || $(this).attr("name");

			if($("#" + idm + "div").length <= 0){//判断动态创建的div是否已经存在,如果不存在则创建
				var divHtml = "<div style='display:none' id='" + idm + "div'><input name='' type='text' id='" + idm + "inputText'/></div>";
				$(this).attr("tabindex",-1).after(divHtml);
				$("#" + idm + "div").css({position:"absolute",top:$(this).position().top ,left:$(this).position().left}).show();
				$("#" + idm + "inputText").val($(this).find("option:selected").text()).css({width:$(this).width()-13,height:$(this).height() + 2});
				$("#" + idm + "inputText").attr("name",$(this).val());
				//select注册onchange事件
				$(this).change(function(){
						$("#" + idm + "inputText").val($(this).find("option:selected").text());	
						$("#" + idm + "inputText").attr("name",$(this).val());	
				})				
			}
			//解决ie6下select浮在div上面的bug
			$("#" + idm + "div").bgIframe();

			var res={"val": $("#" + idm + "inputText").attr("name"),"text":$("#" + idm + "inputText").val()};
			//return $("#" + idm + "inputText").val();
			//return $("#" + idm + "inputText").attr("name");
			return res;
		}
})(jQuery);

调用时如下:
<input id="tx" type="button" name="" value="测试获得的select值" onclick='alert("选中val:" + $("#test1").selectbox().val+"\u000d选中text:" + $("#test1").selectbox().text)'/>
 

 

分享到:
评论

相关推荐

    可输入可选择的SELECT控件

    实现"可输入可选择的SELECT控件"有多种方法,其中一种是利用JavaScript库,如jQuery UI的Autocomplete插件,或者更现代的前端框架如React的Select组件(如react-select)、Vue的v-select等。这些库提供了丰富的...

    html select 可输入 可编辑

    为了实现一个既可输入又可编辑的下拉框效果,开发者通常会采用一些技巧来模拟这种行为。这里,我们将深入探讨如何通过HTML、CSS和JavaScript技术来实现这样一个功能。 首先,我们创建一个基础的HTML结构,包括一个`...

    可手动输入的select

    4. 现代前端框架实现:如果是React、Vue等框架,会涉及组件化编程思想,以及如何创建一个自定义的可输入select组件。 5. 数据处理:如何存储和管理用户输入的数据,以及如何根据用户输入实时过滤和显示选项。 6. ...

    使select可以输入

    自制的jquery插件,只需要一行代码,即可将select控件变成一个即可以输入也可以选择的元素,输入时也会有智能提示。对原来的select的操作完全没有改变,取值依然是取select的值,设置选中,添加项删除项等等都没有...

    可进行输入编辑的select下拉框

    下拉框选择已有固定value,也可以选择后进行编辑,也可以直接输入数值。

    antd form 封装可搜索可输入select

    antd form 封装可搜索可输入select

    layui 可输入,可搜索,可选择

    最后,对于提供的压缩包子文件 "layui_select配合input可输入-可选择-可搜索",可能包含了实现这一功能的示例代码和资源。解压后,你可以参考其中的代码结构和实现方式,以便更好地理解和应用在自己的项目中。记得...

    js实现可下拉可输入input select框

    js实现的可下拉可输入input框 会自动检测输入的值在select中寻找对应选项

    selectbox 插件,即可选择又可输入

    "selectbox 插件,即可选择又可输入"是一个专为提升用户体验设计的JavaScript插件,它结合了传统的下拉选择框(select box)功能和自由输入文本框(input field)的特性,使得用户既可以方便地从预设选项中选择,也...

    可文本输入的下拉框select

    在网页开发中,"可文本输入的下拉框select"是一种常见的交互元素,它结合了传统的HTML `&lt;select&gt;` 下拉菜单和自由文本输入的功能。这种设计可以为用户提供更灵活的选择方式,既可以快速从预设选项中选取,也可以手动...

    支持选择和输入的select下拉列表

    然而,传统的`&lt;select&gt;`下拉列表并不支持文本输入,这意味着用户只能从提供的选项中选择,无法自由输入新的值。在某些场景下,这种限制可能不符合用户体验的需求。为了解决这个问题,开发者通常会采用自定义的解决...

    可输入的select.HTML

    可输入的select,顾名思义,保证了select既可以选择已有的options选项,又可以自己输入自己想要展示的内容。

    JS中Select下拉列表类(支持输入模糊查询)功能

    JS中Select下拉列表类支持输入模糊查询功能的知识点主要包括以下几个方面: 1. HTML结构设计:实现输入模糊查询功能的下拉列表通常包含一个输入框和一个下拉框。输入框用于用户输入查询字符,下拉框则是提供选项供...

    实现可编辑的select

    "实现可编辑的select" 就是这样一种解决方案,它允许用户不仅可以选择已有选项,还能直接输入新的选项并保存。 在提供的压缩包文件中,包含了两个JavaScript文件:`jquery.editable-select.min.js` 和 `jquery....

    可编辑的select下拉框

    此外,`jQuery Editable Select`还提供了一些可配置的选项,如动画效果、输入框的样式、过滤模式等,你可以根据项目需求进行定制。例如,你可以设置`filter`选项来改变过滤逻辑,或者设置`onSelect`回调函数来处理...

    asp.net可输入可选择下拉框

    在这种情况下,“asp.net可输入可选择下拉框”应运而生,它结合了文本框和下拉框的优点,提供了更灵活的交互体验。 首先,我们需要理解这个自定义用户控件的工作原理。通常,它是通过JavaScript或者jQuery在客户端...

    select选择框控件jquery-editable-select支持编辑输入

    在本主题中,我们将关注一个名为"jQuery Editable Select"的插件,它允许用户在选择框中直接编辑和输入。 jQuery Editable Select 是一个轻量级且高度可定制的插件,基于流行的JavaScript库jQuery构建。它提供了一...

Global site tag (gtag.js) - Google Analytics