文档章节

JS----------------创建一个具有下拉框效果的input输入框

哎那个新来的
 哎那个新来的
发布于 2016/08/16 10:47
字数 384
阅读 18
收藏 0

1.创建一个具有下拉框效果的input的输入框的思路:

1.页面:创建一个input输入框,其下面有一个div

2.通过js函数,点击input的时候触发。为div中添加<ul><li></li></ul>列表

3.其中的<li></li>列表点击的时候,为input赋值为<li></li>中的值

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
    font-size:14px;
    }
.lis{
    border-bottom:1px solid #000;
    }
</style>

</head>

<body>
<div style="position:absolute; width:300px; height:100px; left:50%; margin-left:-250px; margin-top:180px; padding:60px; border:1px solid red">
<table>
<tr>
<td>
<input type="text" style="width:50px" value="0.0";  id="tInput" onfocus="setValue('block')"/>
<div id="addValue" style="width:51px; height:130px; z-index:2;position:absolute;top:82px;left:63px;"></div>
</td>
</tr>
</table>
</div>
<input type="button" id="btn" value="提交" onclick="showInputValue()"/>
<script>
function setValue(dValue,obj){
var divNode = document.getElementById("addValue");
    if(dValue == "block"){
        var iHtml="<ul style='list-style:none; border:1px solid #000;' onmouseout='toHander(this)'>"+
        "<li class='lis' onclick =setValue('none',this)>0.5</li><li class='lis' onclick=setValue('none',this)>1.0</li><li class='lis' onclick=setValue('none',this)>1.5</li>"+
        "<li class='lis'onclick=setValue('none',this)>2.0</li><li class='lis' onclick = setValue('none',this)>2.5</li><li onclick=setValue('none',this)>3.0</li></ul>";
        divNode.innerHTML = iHtml;    
    }else{
        //为控件input赋值[div中li的setValue()函数]
        if(obj!=null){
            var txtNode = document.getElementById("tInput");
            //为text文本赋值为<li>标签中的值
            txtNode.value=obj.innerHTML;
        }
        //隐藏div
        divNode.innerHTML = "";
    }
}
//设置移动上去变为收的形状
function toHander(obj){
    obj.style.cursor = 'pointer';
    
}

//显示input的值
function showInputValue(){
var inpNode = document.getElementById("tInput");
    alert(inpNode.value);
}
</script>
</body>

</html>

© 著作权归作者所有

共有 人打赏支持
哎那个新来的
粉丝 0
博文 92
码字总数 29196
作品 0
闸北
程序员
DataList:HTML5中的input输入框自动提示利器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果。它是HTM...

ZhangLG
05/26
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
input搜索下拉提示框,支持拼音检索、过滤、级联、自定义数据源的ajax异步下拉展示

为解决大数据量下拉字典效率及操作问题,整理出通用的数据字典模块,所有字典数据可在数据库维护,在大数据量时采用分页下拉的展示方式,同时支持拼音简拼搜索,代码项、代码值搜索等,支持无...

神话无名
06/07
0
0
EasyUI Combobox中getValue和getText

在组织部项目中使用的Combobox都是通过<input>标签实现的,如下: <input id="checkPlace" class="easyui-combobox" name="checkPlace" data-options="valueField:'id',textField:'text',ur......

霜叶情
04/12
0
0
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

解决访问swaggerUI接口文档显示basic-error-controler问题

使用swagger生成接口文档后,访问http://localhost:8888/swagger-ui.html#/,显示如下: 解决方法: public Docket createRestApi() {return new Docket(DocumentationType.SWAGGER_2)......

张欢19933
27分钟前
1
0
区块链教程以太坊源码分析core-state-process源码分析(二)

兄弟连区块链教程以太坊源码分析core-state-process源码分析(二):关于g0的计算,在黄皮书上由详细的介绍和黄皮书有一定出入的部分在于if contractCreation && homestead {igas.SetUin...

兄弟连区块链入门教程
31分钟前
0
0
BLAKE2 — fast secure hashing

BLAKE2 — fast secure hashing SPECS | CODE | B2SUM | CONTACT | USERS | THIRD-PARTY SOFTWARE | CRYPTANALYSIS | FAQ Come from http://www.blake2.net/ BLAKE2 is a cryptographic has......

openthings
38分钟前
4
0
Titan Framework MongoDB深入理解3

在前两篇文章中,我们介绍了操作Mongo数据库的类型Curd和Finder,下面要理解的是框架内mongoDB操作的条件类型——MongoDBQueryCondition。 MongoDBQueryCondition是一个接口,规定了一些实现...

云季科技
38分钟前
0
0
数据结构(算法)-树

#include <iostream>#include <malloc.h>using namespace std;#define MaxSize 100typedef char ElemType;typedef struct node{ElemType data;struct node *left ,*......

ashuo
40分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部