`
androidnew
  • 浏览: 130795 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使得select选择框也可以输入

阅读更多

<script language="javascript">
    function changeF()
    {
       document.getElementById('makeupCo').value=
       document.getElementById('makeupCoSe').options[document.getElementById('makeupCoSe').selectedIndex].value;
    }
</script>

<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;
	height:19px;clip:rect(-1px 190px 190px 170px);">
<select name="makeupCoSe" id="makeupCoSe" style="width:190px;height:20px;margin:-2px;" onChange="changeF();">
	<option id='1' value='java'>java</option>
	<option id='2' value='c++'>c++</option>
	<option id='3' value='python'>python</option>
	<OPTION id="99999" VALUE="" SELECTED>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt 
	solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
	<input type="text" name="makeupCo" id="makeupCo" value="请选择或输入" style="width:170px;height:15px;border:0pt;">
</span>

分享到:
评论
18 楼 clone168 2009-10-23  
<p>不错,记得以前也讨论到这个问题,有兴趣可以看看我根据JE的个人信息页面写的代码:<a href="/topic/460840" target="_blank">再谈“可输入的下拉框”,完全支持中文输入</a>,<img src="/images/smiles/icon_biggrin.gif" alt=""></p>
17 楼 jxjjymx 2009-10-14  
学习了。。。
16 楼 ld3838029 2009-10-13  
恩,不错!!!
15 楼 spring1118 2009-10-13  
顶顶顶
14 楼 cuiran 2009-10-12  
不错,学习了!
13 楼 lkjust08 2009-10-12  
有创意,学习一下拉。
12 楼 malasun 2009-10-12  
http://code.google.com/p/zkjs/
这里有
11 楼 阳光暖暖 2009-10-12  
挺好用的,先收藏起来。
10 楼 androidnew 2009-10-12  
恩。可以根据具体的应用,做点修改,就可以放到项目中去。
客户想要个就可以选择也可以输入的东西
9 楼 maxwee 2009-10-12  
还是比较可以。。
  布局优化一下就OK。 应该还有其他方法实现噢。。
8 楼 lucky16 2009-10-12  
确实好哦~,我也收藏了~
7 楼 axhack 2009-10-12  
这个我一定要顶
6 楼 Qiao.Gbin 2009-10-12  
嗯.很不错.收藏了.~~
5 楼 caizh2009 2009-10-12  
非常不错,创意好,美化一下很有用
4 楼 java.lang.Object 2009-10-12  
不错,挺有创意的,不过就是使用了绝对布局。
3 楼 wangdgsc 2009-10-11  
也可以直接用text+image+div,我好像有在哪个网站上看到过。
呵呵
2 楼 zhys513 2009-10-11  
不错哦,不需要其他依赖,有点像DOJO的select哦!
1 楼 whaosoft 2009-10-10  
有点像联想功能了哦~~!

相关推荐

    select选择框小插件

    开发者可以通过查看和学习这个插件的源码,了解如何使用jQuery来增强原生`select`元素的功能,也可以借鉴其中的设计思想,为自己的项目打造类似的组件。 总的来说,这个`select`选择框小插件是前端开发中的一个实用...

    jquery实现select带模糊搜索下拉选择框

    本教程将详细讲解如何使用 `jQuery` 实现一个具有模糊搜索功能的下拉选择框,以提升用户在交互时的体验。 首先,我们需要了解 `select` 元素在HTML中的基本用法。`&lt;select&gt;` 标签用于创建一个下拉列表,用户可以...

    bootstrap-select下拉选择搜索框,可以多选和单选

    这款插件使得在网页交互中,用户可以更方便地进行选择操作,尤其是在面对大量选项时,其内置的搜索功能能够帮助用户快速定位所需内容。 Bootstrap本身是一个流行的前端开发框架,它提供了一系列现成的CSS、...

    select2-3.5.3插件(最完善的选择框插件 )

    **选择框插件:select2-3.5.3** `select2-3.5.3`是一款功能强大的选择框插件,专为HTML中的`&lt;select&gt;`元素提供增强功能,使其具有更丰富的用户交互体验和高度的定制性。这款插件在前端开发领域广泛应用,因其能够...

    html select 可输入 可编辑

    用户可以自由输入,同时也能从预设的选项中选择。在实际应用中,你可以根据需求进一步定制这个组件,例如添加自动完成功能、限制输入内容、处理输入错误等。这个`select_edit.html`文件可能就包含了上述代码的示例,...

    select 增加搜索框

    4. **事件监听**:如果需要监听搜索框的输入事件,可以使用`Chosen`提供的API。例如,监听搜索框的`change`事件来处理用户的搜索操作: ```javascript $("#yourSelectId").on("change", function() { var ...

    jsp select 带多选框

    在这个例子中,`&lt;select&gt;`标签的`name`属性定义了表单字段的名称,`multiple`属性使得用户可以多选,`size`属性定义了下拉框显示的选项数量。每个`&lt;option&gt;`标签代表一个可选的值,用户可以看到并选择。 在实际应用...

    xm-select下拉选择框 v1.2.4.zip

    《XM-SELECT下拉选择框:深度解析与应用》 XM-SELECT下拉选择框是一款在Web开发中广泛使用的组件,特别适用于需要提供多选、筛选功能的场景。其v1.2.4版本的发布,带来了更稳定、更高效的操作体验。这款组件以其...

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

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

    BootStrap的select2既可以查询又可以输入的实现代码

    总的来说,通过Bootstrap的Select2插件,我们可以轻松实现一个既能查询又能输入的下拉选择框。这个功能对于提升用户交互体验非常有用,尤其是在需要用户从大量选项中选择或创建新选项的情况下。希望这篇文章对你理解...

    可输入的下拉框(autoComplete)

    GoogleSuggest是Google搜索的一个特性,当用户在搜索框中输入关键词时,Google会实时显示与已输入部分匹配的建议搜索词,用户可以从中选择,也可以继续输入自己的关键词。这种设计不仅有助于减少拼写错误,还能引导...

    select2框架

    这个框架使得原本功能单一、样式简陋的下拉选择框变得功能强大且视觉效果良好,提供搜索过滤、多选、分页等多种特性,广泛应用于网页开发中。 描述中的"select下拉框美化布局!"进一步强调了Select2的核心功能,即...

    SelectBox下拉复选框多选插件

    它结合了传统的下拉列表和复选框的特性,使得在有限的空间内,用户能够方便地筛选和选择多个选项。以下是对这个主题的详细说明: 1. **下拉列表多选框**:传统的HTML `&lt;select&gt;` 元素只支持单选,但通过添加多选...

    Bootstrap-selectpicker多选框插件的demo源码

    Bootstrap是一个流行的前端开发框架,它提供了丰富的组件和样式,使得开发者可以快速构建美观且响应式的网页。Bootstrap-selectpicker是Bootstrap框架的一个扩展插件,专门用于增强原生的HTML选择器,使其具有更友好...

    Choicesjs一个JS可定制的选择框文本输入插件

    Choices.js 是一个强大的JavaScript库,专门用于创建可高度定制的选择框和文本输入插件。它为开发者提供了丰富的自定义选项,使得在Web应用中构建功能丰富、交互性强的表单元素变得轻而易举。这个插件尤其适用于那些...

    c# 可输入可选择时间日期控件

    这种控件允许用户既可以手动输入日期和时间,也可以通过日历或者时间选择器来方便地选取。本资源提供的就是一个这样的控件,包括了源代码和已编译的DLL文件,方便开发者进行二次开发和自定义。 1. **C#控件开发**:...

    Vue中Table组件Select的勾选和取消勾选事件详解

    通过监听Input组件的"on-change"事件,可以实时获取用户输入并更新到data属性中的相应数据。这种绑定方式是Vue响应式系统的一部分,使得开发者能够方便地进行DOM操作和数据交互。 7. 总结: 在Vue中,要实现Table...

    JS实现单击输入框弹出选择框效果完整实例

    这个实例展示了如何利用JavaScript实现输入框和选择框之间的互动,使得用户在输入时可以方便地从一组预设选项中选取,同时将所选内容显示在输入框中。这样的设计常见于各种表单和搜索功能,提高了用户在网页上的操作...

    js联动选择插件mobileSelect.js

    6. **兼容PC端拖拽**:尽管是为移动端设计,mobileSelect.js 还考虑到了桌面用户的体验,支持鼠标拖拽选择,使得在PC端使用同样便捷。 **应用场景:** - 在线商城的商品筛选:用户可以根据品牌、价格区间等条件...

Global site tag (gtag.js) - Google Analytics