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基础 电脑知识

随机阅读

Mysql-MariaDB设置延迟同步
Spring Cloud 从入门到精通
HTML+CSS 是什么意思
【Blazor】在ASP.NET Core中使用Blazor组件 -
如何使文字在div中水平和垂直居中的css代码,div水平垂直居中di
国务院办公厅关于2021年部分节假日安排的通知
Iframe嵌套HTML网页的用法?
Azure Cosmos DB (二) SQL API 操作
iframe—网页中嵌入其他网页
网页如何通过IFRAME嵌入另一个网页的一部分

最新

div css隐藏内容样式方法
OPPO Reno3 Pro远程守护怎么使用?
XP系统里让IE支持多线程下载怎么设置
qq电脑管家温度检测在哪设置的? QQ电脑管家怎么测电脑的温度
win7禁用ie浏览器方法 win7怎么把桌面的ie隐藏
WinXP笔记本声卡驱动无法成功安装的解决方法
XP⁄Win7共享⁄连接打印机设置详细 xp怎
华为笔记本蓝屏错误0xcoooo428怎么解决
企业如何部署微软Windows 8? Windows 8的开发历史
华为mate9怎样解指纹密码?

推荐阅读

c语言中break语句的作用
undefined是什么意思啊
vscode----vue中HTML代码tab键自动补全
js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳
DIV CSS字体(font-family)实现字体样式设置
C语言程序中break是什么意思?
C#语言之“string格式的日期时间字符串转为DateTime类型”
Mysql里表示布尔型的类型是什么
replace和replaceAll是JAVA中常用的交换字符的办法
sql中的modify语句,修改列属性


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