文档章节

实现一个combo选项

spademan
 spademan
发布于 2013/10/16 10:11
字数 380
阅读 63
收藏 0

可以手动输入值,也可以选择下拉列表值

思路:

①布局select和input,让input覆盖select,除了select的下拉图标,以方便select选择

②编写JS,为select添加onchange事件,onchange时将input的value置成select选中的值

下面给出两个实现:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

<title></title>

<style>

 

html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;text-align:center;}

#container{padding:0px;position:relative;width:100px;margin:0 auto;}

#comboinput{width:70px;margin-left:0px;display:block;height:20px;font-size:15px;position:absolute;top:0px;left:0px;}//绝对定位

#comboselect{width:93px;display:block;height:26px;font-size:15px;}

</style>

 

</head>

 

<body>

<div id="container">

       <input type="text" id="comboinput" style="z-index:9999;"/>

       <select id="comboselect">

              <option>A</option>

              <option>B</option>

              <option>C</option>

              <option>D</option>

       </select>

</div>

 

</body>

<script>

       var element = document.getElementById("comboselect");

       element.onchange = function ab(){ //放在后面因为idcomboselect的元素尚未加载

              var index = element.options.selectedIndex;

              var val = element.options[index].value;

              document.getElementById("comboinput").value=val;

       }

</script>

</html>

 

 

 

 

第二种实现:

 

<HTML>

<HEAD>

<META http-equiv='Content-Type' content='text/html; charset=GBK'>

<TITLE>可输入的下拉框</TITLE>

<style type="text/css">

    .container {position:relative;margin:10px;}

    .container .sel {margin-left:-100px;width:120px;}

    .container .input {width:100px;height:20px;position:absolute;}

</style>

</HEAD>

<BODY>

<div class="container">

<span style="margin-left:100px;width:20px;overflow:hidden;position:absolute;">

    <select class="sel" id="sel">

        <option value="选项1">选项1</option> //设置value

        <option value="选项2">选项2</option>

        <option value="选项3">选项3</option>

        <option value="选项4">选项4</option>

    </select>

</span>

    <input type="text" class="input" id="input"></input>

</div>

<script type="text/javascript">

    var sel = document.getElementById("sel");

    var input = document.getElementById("input");

    sel.onchange = function() {

        input.value = sel.value;//因为option设置了value属性

    }

</script>

</BODY></HTML>


© 著作权归作者所有

spademan
粉丝 8
博文 92
码字总数 39247
作品 0
广州
前端工程师
私信 提问
VC++ COMBO BOX控件的使用

1.你在编辑状态下点那个控件的向下的三角形,就出冒出来一个可以调高度的东东。将高度调高,否则在执行时会不能显示下拉选项。 2.为combo box添加选项,在编辑状态下选combo box控件的属性,...

云栖希望。
2017/12/04
0
0
jQuery 下拉查询筛选插件Combo Select

插件描述:Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式。Combo Select 能够对选项进行检索过滤,同...

卯金刀GG
2016/12/02
118
1
MFC COMBOBOX的使用

MFC COMBOBOX的使用 Combo Box (组合框)控件很简单,可以节省空间。从用户角度来看,这个控件是由一个文本输入控件和一个下拉菜单组成的。用户可以从一个预先定义的列表里选择一个选项,同时...

IMGTN
2012/11/24
0
0
jQuery下拉框插件--Combo Select

Combo Select 是一款友好的 jQuery 下拉框插件,在 PC 浏览器上它能模拟一个简单漂亮的下拉框,在 iPad 等移动设备上又能回退到原生样式。Combo Select 能够对选项进行检索过滤,同时支持键盘...

dowebok
2015/06/23
3.2K
1
PyQt5教程(七)——控件(II)

原文:http://zetcode.com/gui/pyqt5/widgets2/ 下面我们继续介绍PyQt5控件。我们将学习QPixmap, QLineEdit, QSplitter与QComboBox。 QPixmap 是一种用于处理图像的控件。它为图片的显示做过...

pseudo
2015/12/16
632
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro ScrollView 组件的 scrollTop 属性是个坑

官方issue:ScrollView设置scrollTop没效果 同样的,设置 scrollTop=0 并不能实现置顶,官方回复早就修复了,我的 Taro 版本已经是最新的,然而并未修复。 万能的评论区,给出了失效的原因。...

dkvirus
34分钟前
3
0
Qt那些事0.0.21

这次还是关于PRO文件中QMAKE_POST_LINK的故事。 平时都是使用VS2015作为编译器,恰巧想用MinGW编一版程序,结果偏偏出现了错误。话说测试的这个项目可是在Linux下(fodera 20)可以正确编译通...

Ev4n
44分钟前
0
0
OSChina 周六乱弹 —— 抖音外放 亲妈下葬。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :一直没想明白黎明是怎么混进「四大天王」的,直到最近网易云音乐心动模式开启之后 #今日歌曲推荐# 《那有一天不想你》- 黎明 手机...

小小编辑
今天
395
8
Linux使用源码包安装软件

前言: 最近整理一些以前的学习笔记。 过去都是存储在本地,此次传到网络留待备用。 源码包 Linux软件多数免费、开源,是开发人员编写的,具有很强可读性的一组相关代码文本。 源码包 --> 编...

迷失De挣扎
今天
6
0
IPv4如何转换为IPv6?

ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv6相关计...

xiangyunyan
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部