Html5下拉控件同时支持文本输入和下拉代码

有时候,下拉框不能满足我们的业务需求,还需要同时支持用户输入内容,默认的select标签是不支持用户输入的,下面我说一下原生的select如何支持用户输入,代码如下:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div style="position:relative;">
            <span style="margin-left:105px;overflow:hidden;">
            <select style="width:118px;margin-left:-100px;height:21px;" onchange="this.parentNode.nextSibling.value=this.options[this.selectedIndex].text;">
                <option value="-1">请选择...</option>
                <option value="1">选项一</option>
                <option value="2">选项二</option>
                <option value="3">选项三</option>
            </select>
            </span>
            <input type="text" style="width:100px;position:absolute;left:0px;" value="请选择...">
        </div>
    </body>
</html>
时间: 2024-10-13 00:55:44

Html5下拉控件同时支持文本输入和下拉代码的相关文章

基于bootstrap的multiple-select下拉控件使用

multiple-select是一款优秀的下拉菜单控件,能够支持单选和多选. 详细参考文档: JS组件系列--两种bootstrap multiselect组件大比拼 multiple-select 本项目通过使用控件multiple-select实现动态创建单选和多选下拉控件 这里做个小说明:一开始我选用的控件为bootstrap-multiselect  后来,由于我的需求中有个要求:单选下拉默认是不需要有选中项,而bootstrap-multiselect默认会选中一个下拉,multipl

解决easyUI下拉控件无法触发onkeydown事件

实现在combotree下拉控件中按Backspace键清除combotree选中的值 下面的代码无法获取到键盘事件 <input class="easyui-combotree" id="tt" name="tt" onkeydown="if(event.keyCode==8) clear()"/> 原因是easyUI重新定义了键盘事件,解决如下: $("#tt").combotree({ u

使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import android.support.v4.widget.SwipeRefreshLayout; import android.support.v7.app.AppCompatActivity; import android.view.Gravity; import android.view.View;

DevExpress控件GridView挂下拉控件无法对上值

下拉控件使用RepositoryItemLookUpEdit,加入如下事件进行处理. repositoryItemLookUpEdit1.CustomDisplayText += new DevExpress.XtraEditors.Controls.CustomDisplayTextEventHandler(repositoryItemLookUpEdit1_CustomDisplayText);

Android 使用动画效果后的控件位置处理 类似系统通知栏下拉动画

Android的动画的使用,请参考.Android的动画,在设计方面,我有点不太理解,觉得这样搞很怪,因为在控件动画后,即使设置了停留在动画结束时的位置,我们也确实看到了控件停在那个位置,但其实该控件的真实位置还是在原来动画前的那里.举个例子,如果有个Button,你给它设置了动画,让它移动到其他位置,当移动完成后,你会发现,点击Button没有任何效果,而在Button原来的位置,就是动画前的位置点击,明明没有任何控件,却看到了点击Button的效果.不知道Google为什么要这样设计.解决思

Windows static控件(静态文本框控件)

文本不克不及主动换行,超越窗口规模会被隐蔽: 每次更改文本都要先擦除配景再从新输入,比拟费事. 实践开辟中普通运用静态文本框控件来输入文本.静态文本框是Windows 的一种规范控件,可以用来在窗口上显示一段文本,而且文本轻易遭到掌握.除了静态文本框,Windows的规范控件还有许多种,例如按钮.下拉菜单.单选按钮.复选框等.其实,控件也是一种窗口,也运用 CreateWindow 函数来创立.然则它们运用的窗口类的名字比拟特别,是由Windows预界说的:静态文本框控件的窗口类名是static

定制progrebar-如何让控件在2.x系统里显示holo风格(4.x系统下的控件风格)

定制progrebar,这里以progrebar(small)为例,使之在2.x系统里显示holo风格. 1)找到系统文件styles.xml 和themes.xml. 在目录adt-bundle\sdk\platforms\android-19\data\res\values下找到styles.xml和  themes.xml,用Uedit打开: 2) 在系统的styles.xml中搜索控件名称progrebar,找到 "  <style name="Widget.Holo.P

scrollview嵌套上下拉控件嵌套recyclerview

相信会碰到很多类似的需求,一个列表控件,然后控件上方的一个头部需要自定义,这样就不好有时候也不能加在列表控件的头部了,那必须得嵌套一层scrollview了,没毛病,那么一般的列表控件都是有上拉下拉的操作,而且一般也是在 github 上找寻一个收藏量高的 来做为一个全局通用的上下拉控件,这里问题就来了,一般的 scrollview 嵌套 recyclerview 或者 listview 都毕竟容易解决,可是在加上一层上下拉控件呢?上下拉控件肯定会有它自己的触摸处理机制,这样你改起来也很麻烦,这

Delphi下使用Oracle Access控件组下TOraSession控件链接

Delphi下使用Oracle Access控件组下TOraSession控件链接数据库,使用  orsn1.Options.Direct:=true;  orsn1.Server:=IP:Port:SID;  orsn1.Username:=UserName;  orsn1.Password:=PassWord;  orsn1.Connect; 即可链接成功,这是使用SID方式链接的.但如果登陆数据库使用服务名方式,程序死活链接不上,原因,说是因为Delphi ODAC与Oracle RACD