`

可自己输入内容的下拉框

 
阅读更多

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Bootstrap 实例 - 输入框组的下拉菜单按钮</title>
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script>
 function haha(x){
 $(".form-control").val(x);
  $(".dropdown-menu pull-right").hide();
 }
 </script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
 <form class="bs-example bs-example-form" role="form">
  <div class="row">
   
   <div class="col-lg-6" style="width:180px">
    <div class="input-group">
     <input type="text" class="form-control">
     <div class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
       
       <span class="caret"></span>
      </button>
      <ul class="dropdown-menu pull-right">
       <li><a href="javascript:haha('aa');">aa</a></li>
       <li><a href="javascript:haha('bb');">bb</a></li>
       <li><a href="javascript:haha('cc');">cc</a></li>
      </ul>
     </div><!-- /btn-group -->
    </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
  </div><!-- /.row -->
 </form>
</div>

</body>
</html>

分享到:
评论

相关推荐

    可以输入的下拉框 下拉框和文本框组合共用

    可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用可以输入的下拉框. 下拉框和文本框组合共用...

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

    开发者可以通过查看和学习这些文件,了解具体的实现细节和技巧,以便在自己的项目中应用或改进这种可输入可选择的下拉框控件。 总之,"asp.net可输入可选择下拉框"是一种增强用户体验的设计,它通过结合传统的...

    可手写输入的下拉框,代码少,简单

    通过研究这个文件,开发者可以了解到如何将手写输入功能集成到自己的下拉框组件中,也可以根据自己的需求进行定制和优化。 总之,"可手写输入的下拉框"是一种实用且创新的交互设计,它利用现代Web技术提升了用户...

    可输入的下拉框

    "可输入的下拉框"是一种常见的交互元素,它结合了传统下拉菜单与搜索输入框的功能,使得用户在选择选项时可以更加高效和精确。这种设计常见于网页和应用程序中,用于提供多样化的选择并允许用户通过输入关键词快速...

    可输入下拉框(html控件)

    简单javavscript实现的可输入下拉框(仿VC的comobox),用于html网页开发。 不懂代码的,可直接在页面中插入该源码实现,方便易用。

    可文本输入的下拉框select

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

    可输入下拉框可输入下拉框

    标题中的“可输入下拉框”通常指的是在网页...由于描述信息有限,无法提供具体的代码示例或详细步骤,但以上内容概括了可输入下拉框的基本概念和实现方式。如果需要更深入的指导,需要进一步查阅WebSite4内的代码文件。

    js 可输入下拉框(jquery)

    在JavaScript和jQuery的世界里,"js 可输入下拉框(jquery)"是一个常见的交互设计需求,它结合了传统下拉框的简洁性与输入框的搜索功能,为用户提供更友好的交互体验。这种组件通常被称为“Autocomplete”或...

    可输入的下拉框(autoComplete)

    标题中的“可输入的下拉框(autoComplete)”指的是自动完成或自动填充功能,它在用户界面设计中被广泛使用,特别是在Web表单和移动应用中。这种功能结合了文本输入框和下拉列表,当用户在输入框中键入文字时,系统...

    可输入的下拉框.rar

    4. Vue.js、React等前端框架:它们提供了组件化开发方式,也有对应的可输入下拉框组件。 五、代码示例 以下是一个使用纯JavaScript实现的简单例子: ```html &lt;option value="option1"&gt;Option 1 ...

    【ASP.NET编程知识】ASP .NET 可编辑输入自动匹配的下拉框.docx

    本文将详细介绍 ASP.NET 可编辑输入自动匹配的下拉框的实现方法,该控件可以自动匹配用户输入的内容,并提供相关的下拉选项。本文将从三个方面介绍该控件的实现方法:首先,介绍如何在 ASP.NET 项目中添加 Telerik ...

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

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

    支持手动输入的下拉框

    支持手动输入的下拉框,即用户可以在一个下拉框中输入文字,系统会根据输入内容动态展示匹配的建议列表。这种设计提升了用户体验,因为它减少了用户在大量选项中查找所需项的时间,同时允许用户输入未包含在预设选项...

    自动匹配可输入的下拉框

    3. **React实现**:React使用组件化思想,可以自定义一个可输入下拉框组件。通过状态管理和事件处理函数,实现输入框和下拉列表的联动。`react-select`是一个广泛使用的React库,提供了丰富的定制选项和性能优化。 ...

    可以输入的下拉框(可用于项目的)

    标题中的“可以输入的下拉框(可用于项目的)”是指一种交互式UI组件,它结合了传统下拉框和文本输入框的功能,用户既可以从中选择已有的选项,也可以自行输入新的内容。这种设计在许多Web应用和软件项目中非常常见,...

    可以输入带自动匹配的下拉框

    在IT行业中,创建一个“可以输入带自动匹配的下拉框”是常见的需求,尤其在网页交互设计中。这样的功能通常被称作自动补全(AutoComplete)或智能搜索框,它极大地提升了用户输入数据的效率和用户体验。下面将详细...

    可输入的下拉框 控件

    在主页面(.aspx)中,你可以像使用普通ASP.NET控件一样使用这个自定义的可输入下拉框控件。 ```xml ~/CustomDDL.ascx" %&gt; ``` 通过这样的实现,我们可以为用户提供一个既方便选择又支持自定义输入的下拉框控件。...

    可输入的下拉框 可以用来做模糊查询

    可输入的下拉框 可以用来做模糊查询 可输入的下拉框 可以用来做模糊查询

    下拉框和文本框组合共用-可以输入的下拉框ok

    4. **实现原理**:开发者通常会监听文本框的`input`事件,当用户开始输入时,根据输入的内容过滤下拉框中的选项。这可能涉及到数组或对象的操作,以及DOM的动态更新。同时,可能还需要考虑错误处理,例如输入无效...

Global site tag (gtag.js) - Google Analytics