`

使得select选择框也可以输入

    博客分类:
  • web
阅读更多
<HTML>
<HEAD>
<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>  
</HEAD>
<BODY>

</BODY>
</HTML>

分享到:
评论

相关推荐

    select选择框小插件

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

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

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

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

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

    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