Datalist options 集合,options语法,options方法,options示例代码

分类 : .NET技术

Datalist options 集合

Datalist 对象 上一级

示例代码

遍历datalist控件的所有选项,并输出选项值:

var x = document.getElementById("mySelect");
var txt = "";
for (var i = 0; i < x.options.length; i++)
{
txt = txt + x.options[i].value + "<br>";
}

txt 输出结果为:

Internet Explorer
Firefox
Chrome
Opera
Safari

演示一下 ?

一、定义和使用

options 集合返回datalist中所有选项的集合。

注意: 集合元素的排序按元素在代码中的位置排序。

可通过表单的 elements[] 数组访问一个 Option 对象,或者通过使用 document.getElementById()。

//NS_OPTIONS,定义选项

typedef NS_OPTIONS(NSUInteger, MyOption) {

MyOptionNone = 0, //二进制0000,十进制0

MyOption1 = 1 << 0,//0001,1

MyOption2 = 1 << 1,//0010,2

MyOption3 = 1 << 2,//0100,4

MyOption4 = 1 << 3,//1000,8

};

使用方法:

//声明定义枚举变量

MyOption option = MyOption1 | MyOption2;//0001 | 0010 = 0011,3

//检查是否包含某选型

if ( option & MyOption3 ){ //0011 & 0100 = 0000

   //包含MyOption3

}else{

   //不包含MyOption3

}

//增加选项:

option = option | MyOption4;//0011 | 1000 = 1011, 11

//减少选项

option = option & (~MyOption4);//1011 & (~1000) = 1011 & 0111 = 0011, 3


二、浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 options 集合。


三、options语法

datalistObject.options

四、options属性

Property描述
length返回集合中选项元素的个数

五、options方法

方法描述
[index]一个整数,指定要检索的元素(从0开始)
item(index)从集合 返回指定索引的元素 (从0开始)
namedItem(name_or_id)从集合中以指定名称 (name 或 id 属性)返回元素


六、options示例代码

示例代码

显示 datalist 元素个数:

var x = document.getElementById("browsers").options.length;

x 输出结果为:

5

<form>

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

</form>

<p>点击按钮获取 datalist 中选项的个数:</p>

<p id="demo"></p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong> Internet Explorer 9 和更早IE版本,Safari浏览器均不支持 datalist 元素。</p>

<script>

function myFunction(){

var x = document.getElementById("browsers").options.length;

document.getElementById("demo").innerHTML="找到 " + x + " 选项在列表中";

}

</script>


示例代码

[index]

返回datalist中第一个选项 (索引 0)的值:

var x = document.getElementById("browsers").options[0].value;

x 输出结果为:

Internet Explorer

<form>

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

</form>

<p>点击按钮返回 datalist 中第一个选项的值。</p>

<p id="demo"></p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong>Internet Explorer 9 和更早IE版本,Safari浏览器均不支持 datalist 元素。</p>

<script>

function myFunction(){

var x = document.getElementById("browsers").options[0].value;

document.getElementById("demo").innerHTML=x;

}

</script>


示例代码

item(index)

返回datalist中第一个选项 (索引 0)的值:

var x = document.getElementById("browsers").options.item(0).value;

x 输出结果为:

Internet Explorer

<form>

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

</form>

<p>点击按钮返回datalist中第一个选项的值。</p>

<p id="demo"></p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong>  Internet Explorer 9 和更早IE版本,Safari浏览器均不支持 datalist 元素。</p>

<script>

function myFunction(){

var x = document.getElementById("browsers").options.item(0).value;

document.getElementById("demo").innerHTML=x;

}

</script>


示例代码

namedItem(name_or_id)

返回 datalist 中选项id="google" 的值:

var x = document.getElementById("browsers").options.namedItem("google").value;

x 输出结果为:

Chrome

<form>

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option id="google" value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

</form>

<p>点击按钮返回 datalist 中  id="google" 选项的值。</p>

<p id="demo"></p>

<button onclick="myFunction()">点我</button>

<p><strong>注意:</strong> Internet Explorer 9 和更早IE版本,Safari浏览器均不支持 datalist 元素。</p>

<script>

function myFunction(){

var x = document.getElementById("browsers").options.namedItem("google").value;

document.getElementById("demo").innerHTML = x;

}

</script>


分类: .NET技术    访问() .NET技术    Web前端    JAVA开发    HTML基础    数据库    CSS基础    电脑知识   
CSS教程-web前端教程-免费教程
HTML教程-web前端教程-免费教程


分类

.NET技术 Web前端 JAVA开发 HTML基础 数据库 CSS基础 电脑知识

随机阅读

免费软件哪里找(设计编程类),求大神赐教
css取消浮动代码 有关css伪类:after清除浮动的问题
commonjs 与 es6相关Module语法的区别
c#怎样日期转换成字符串
<a>标签中href="javascript:;"表示什么
零基础学习C语言,怎么入门?
oracle字段like多个条件
oracle sql like多个条件函数
c语言用什么软件编写(新手c语言基础知识入门)
Oracle实现like多个值的查询-Oracle实现like多个值的

最新

零基础学习C语言,怎么入门?
C语言使用什么软件?
c语言用什么软件编写(新手c语言基础知识入门)
Oracle如何实现like多个值的查询
Oracle如何实现like多个值的查询 - 数据库
oracle 多个like条件查询
Oracle中关键字like的使用总结
oracle 中模糊查询对like的代替insrt()函数
oracle数据库模糊查询匹配多个字符串
Oracle如何实现like多个值的查询 - Oracle - 服务器

推荐阅读

c语言中break语句的作用
vscode----vue中HTML代码tab键自动补全
undefined是什么意思啊
C#语言之“string格式的日期时间字符串转为DateTime类型”
DIV CSS字体(font-family)实现字体样式设置
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
C语言程序中break是什么意思?
replace和replaceAll是JAVA中常用的交换字符的办法
risk-taking中文是什么意思
如何把Excel中的8位的日期字符串转换为日期


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16