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技术  发布: 2019-07-18-星期四   访问() .NET技术    Web前端    JAVA开发    语言编程    数据库    电脑知识    代码案例

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved