JS-005-常见下拉列表 Select 和 datalist
下拉列表在我们日常的网页浏览的过程中,随处可见,是 web 编程过程中大家非常熟悉的一个页面元素,随着 HTML 语言的日益强大,其在广大攻城狮的手中可谓是千变万化,有了很多不同的实现方式。本文主要以常规的 Select 下拉列表来讲述 js 对下拉列表的常规操作,其中 datalist 算是此文稍许的延伸,也可看做一种简单的下拉列表,遗憾的是 IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 datalist 标签,其主要应用于输入或搜索文字的自动完成功能等,感兴趣的亲们可以详细探究一下,在此不再赘述。谢谢!
小二上码了,各位看官,敬请参阅,小生有礼了。。。
以下为相应的 HTML 源码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>JS-005-常见下拉列表 Select 和 datalist</title>
</head> <body>
<div>
<h4 id="p1">下拉列表:Select</h4> <ul>
<li>设置是否选中:optionObject.selected=true|false</li>
<li>返回选中状态:optionObject.selected</li>
</ul> <input id="sel" type="text"> <select class="sel" onchange="selchange();">
<option value="1" >山东</option>
<option value="2" >上海</option>
<option value="3" >江苏</option>
</select>
</div> <form action="form.php" method="get">
<h4 id="p1">下拉列表:datalist</h4> <ul>
<li>datalist 描述了其可能的值</li>
<li><datalist> 标签规定了 <input> 元素可能的选项列表。
<li> <datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。</li>
<li>请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。</li>
<li>注意:IE 9 和更早版本的 IE 浏览器 以及 Safari 不支持 datalist 标签</li>
</ul> <input list="browsers" name="browser"> <datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="color">
<option value="Opera">
<option value="Safari">
</datalist> <input type="submit">
</form> <div>
<br><br><br><br>
<a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>
</div>
</body>
</html>
对应上述 HTML 源码调用的 js 函数 selchange() 如下所示:
对应上述 HTML 源码调用的 php 文件 form.php 如下所示:
以下为相应的 web 页面显示:
至此, JS-005-常见下拉列表 Select 和 datalist 顺利完结,希望此文能够给初学 JavaScript 的您一份参考。
最后,非常感谢亲的驻足,希望此文能对亲有所帮助。热烈欢迎亲一起探讨,共同进步。非常感谢! ^_^
JS-005-常见下拉列表 Select 和 datalist的更多相关文章
- js中常见的问题
js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...
- 用纯css改变下拉列表select框的默认样式(转)
用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习 关键字 前端 发布 kris 2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这 ...
- js进阶 9-14 js如何实现下拉列表多选移除
js进阶 9-14 js如何实现下拉列表多选移除 一.总结 一句话总结: 1.js如何实现下拉列表多选移除? 把这个下拉列表中的option移除,然后加到另外一个下拉列表(文字)中去.remove方法 ...
- js函数常见的写法以及调用方法
写在前面:本文详细的介绍了5中js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法.不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考.1.常规写 ...
- JS中常见算法问题
JS中常见算法问题 1. 阐述JS中的变量提升(声明提前) 答:将所有的变量提升当当前作用域的顶部,赋值留在原地.意味着我们可以在某个变量声明前就使用该变量. 虽然JS会进行变量提升,但并不会执行真正 ...
- js动态生成下拉列表
经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...
- JS中如何获取<Select>中value和text的值
原文地址:JS中如何获取<Select>中value和text的值 html代码: <select id = "city" onchange="chan ...
- JS中常见的几种报错类型
1.SyntaxError(语法错误) 解析代码时发生的语法错误 var 1a; //Uncaught SyntaxError: Invalid or unexpected token 变量名错误 c ...
- JS:JS中常见的 “函数名 is not a function” 错误
js中常见的错误,例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行.这种 ...
随机推荐
- Sublime Text 2配置
gedit用了很久,终于换编辑器了T_T Sublime Text 自行百度谷歌. 一开始我在官网下载的压缩包,然后自己配置.搞了半天后果断删掉...还是用源的自动安装吧.T_T 恩.下面的命令 su ...
- SQL Server事务的隔离级别
SQL Server事务的隔离级别 ########## 数据库中数据的一致性 ########## 针对并发事务出现的数据不一致性,提出了4个级别的解决方法: 隔离级别 第一类丢失更新 脏读 ...
- 【C语言】02-第一个C程序
由于我们最终要学习的是iOS开发,因此就使用Mac平台下的Xcode搭建C语言开发环境,而不使用Windows系统 如果你是在Windows环境下,可以下载这个简单的C语言学习工具:C/C++程序设计 ...
- Ubuntu 循环遍历当前目录下所有文本文件中的字符
sudo grep -n 'xxxx' -r ./*
- [百科]sys/types.h
sys/types.h中文名称为基本系统数据类型.在应用程序源文件中包含 <sys/types.h> 以访问 _LP64 和 _ILP32 的定义.此头文件还包含适当时应使用的多个基本派生 ...
- 一种少见的跨目录写webshell方法
http://hi.baidu.com/kwthqquszlbhkyd/item/480716204cfa33c3a5275afa
- [转].net中的认证(authentication)与授权(authorization)
本文转自:http://www.cnblogs.com/yjmyzz/archive/2010/08/29/1812038.html 注:这篇文章主要给新手看的,老手们可能会觉得没啥营养,就请绕过吧. ...
- JavaWEB中读取配置信息
第一种方法是使用java.io和java.util包,缺点是路径的概念要清晰, 例子: Properties prop = new Properties(); InputStream in = get ...
- thread、operation、GCD
// ViewController.m #import "ViewController.h" @interface ViewController () { //任务队列,能够自动管 ...
- VS 本机调试
VS~通过IIS网站启用"域名"调试 在我们开发网站时,对某些信息进行序列化时,通常使用session,cookies,nosql等技术,而为了安全,我们在服务器上很多情况都做了防 ...