<html>

<head>

<SCRIPT LANGUAGE="JavaScript">

<!--

//oSelect 列表的底部加入了一个新选项

function onload(){

var oOption = document.createElement("OPTION");

oOption.text="Ferrari";

oOption.value="4";

oSelect.add(oOption);

}

function fnChange(){

oData.value+=oCars.options[oCars.selectedIndex].text + " ";

}

//-->

</SCRIPT>

</head>

<body onload="onload()">

<!--手工加入一个Select-->

<!--1 uses the SELECT element to create a drop-down list box-->

<SELECT NAME="Cats" SIZE="1">

<OPTION VALUE="1">Calico

<OPTION VALUE="2">Tortie

<OPTION VALUE="3" SELECTED>Siamese

</SELECT>

<P>

<!--2 select 元素创建了多项选择列表框，方法是设置了 SIZE 和 MULTIPLE 标签属性。

要获得多项选择列表框的选中选项，则须遍历 options 集合并检查 SELECTED 是否被设为 true。-->

<SELECT ID="oSelect" NAME="Cars" SIZE="3" MULTIPLE> <!--此处设置了3和multiple-->

<OPTION VALUE="1" SELECTED>BMW

<OPTION VALUE="2">Porsche

<OPTION VALUE="3" SELECTED>Mercedes

</SELECT>

<P>

<!--3 下面演示Option的使用方法-->

<SELECT ID="oCars" SIZE="1" onchange="fnChange()">

<OPTION VALUE="1">宝马

<OPTION VALUE="2">保时捷

<OPTION VALUE="3" SELECTED>大奔

</SELECT>

<P>

<TEXTAREA ID="oData"></TEXTAREA>

</body>

</html>

附：一些Select的技巧

1.动态创建select

function createSelect(){

var mySelect = document.createElement("select"); 

mySelect.id = "mySelect"; 

document.body.appendChild(mySelect);

}

2.加入选项option

function addOption(){

//依据id查找对象，

var obj=document.getElementById('mySelect');

//加入一个选项

obj.add(new Option("文本","值")); 

}

3.删除全部选项option

function removeAll(){

var obj=document.getElementById('mySelect');



obj.options.length=0;

}

4.删除一个选项option

function removeOne(){

var obj=document.getElementById('mySelect');

//index,要删除选项的序号，这里取当前选中选项的序号

var index=obj.selectedIndex;

obj.options.remove(index); 

}

5.获得选项option的值

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].value;

6.获得选项option的文本

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index].text;

7.改动选项option

var obj=document.getElementById('mySelect');

var index=obj.selectedIndex; //序号，取当前选中选项的序号

var val = obj.options[index]=new Option("新文本","新值");

8.删除select

function removeSelect(){

var mySelect = document.getElementById("mySelect");

mySelect.parentNode.removeChild(mySelect);

}

9.设置select optin被中

function removeSelect(){

// 向办件人员下拉列表动态加入员工

for ( var i = 0; i < json.length; i++) {

var newOption = new Option(json[i].empname, json[i].empid, i);

//向办件人员下拉列表加入员工信息

objDeal.options.add(newOption);

//客户业务员的Id不为空

if(empbyDealEmpId!="" || empbyDealEmpId!=0){

//员工id等于下拉列表中的值,则下拉列表被选中

if(empbyDealEmpId==objDeal.options[i].value){

//推断此下拉列表被选中

objDeal.options[i].selected=true;

}

}

}

}

11 检測是否有选中 2if(objSelect.selectedIndex > -1) { 3//说明选中 4} else { 5//说明没有选中 6} 7 82 删除被选中的项 9objSelect.options[objSelect.selectedIndex] = null;10113 添加项12objSelect.options[objSelect.length] = new Option("你好","hello");13144 改动所选择中的项15objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");16175得到所选择项的文本18objSelect.options[objSelect.selectedIndex].text;19206 得到所选择项的值21objSelect.options[objSelect.selectedIndex].value;22

HTML在Select具体的使用说明的更多相关文章

  1. angularJS内置指令一览

    基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...

  2. 最全的ORACLE-SQL笔记

    -- 首先,以超级管理员的身份登录oracle sqlplus sys/bjsxt as sysdba --然后,解除对scott用户的锁 alter user scott account unloc ...

  3. Matplotlib数据可视化（6）：饼图与箱线图

    In [1]: from matplotlib import pyplot as plt import numpy as np import matplotlib as mpl mpl.rcParam ...

  4. 2、应用程序及驱动-poll和select使用说明

    1.poll机制(如果中断机制出问题了,poll机制是对中断机制的补充,比如等一个小孩,如果小孩生病了,因此隔一段时间应该去找他) poll机制就是给定一段时间,在这一段时间内程序处于睡眠状态一直等待 ...

  5. js模仿ios select效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

  6. HTML Select 标签选择后触发jQuery事件代码实例

    页面设计原由: 因为很多客户不知道如何来到我们公司,领导想让我在微信公众号上面做一个链接,客户可以直接通过微信公众号打开地图并导航到我们公司的办公地点. 实现起来并不难,但由于公司有很多办事处,所以需 ...

  7. Oracle 中 union 和union all 的简单使用说明

    1.刚刚工作不久,经常接触oracle,但是对oracle很多东西都不是很熟.今天我们来了解一下union和union all的简单使用说明.Union(union all): 指令的目的是将两个 S ...

  8. Map工具系列-03-代码生成BySQl工具使用说明

    所有cs端工具集成了一个工具面板 -打开(IE) Map工具系列-01-Map代码生成工具说明 Map工具系列-02-数据迁移工具使用说明 Map工具系列-03-代码生成BySQl工具使用说明 Map ...

  9. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

随机推荐

  1. 在JBuilder8在使用ANT

    在JBuilder8中使用ANT                                                            作者:翁驰原    在JBuilder8中.Ap ...

  2. NYOJ 745 蚂蚁问题(两)

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 下雨了,下雨了.蚂蚁搬家了. 已知有n种食材须要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种 ...

  3. Atitit.软件GUIbutton和仪表板(01)--警报系统--

    Atitit.软件GUIbutton和仪表板(01)--警报系统-- 1. 温度报警防区(鲁大师,360taskman) 1 2. os-区-----cpu_mem_io资源占用监測 1 3. Vm区 ...

  4. 【 D3.js 进阶系列 — 1.1 】 其它表格文件的读取

    CSV 表格文件是以逗号作为单元分隔符的,其他还有以制表符 Tab 作为单元分隔符的 TSV 文件,还有人为定义的其他分隔符的表格文件.本文将说明在 D3 中怎样读取它们. 1. TSV 表格文件是什 ...

  5. Chapter 1 Securing Your Server and Network(3):使用托管服务帐号

    原文:Chapter 1 Securing Your Server and Network(3):使用托管服务帐号 原文出处:http://blog.csdn.net/dba_huangzj/arti ...

  6. atitit.（设计模式1）--—职责链(chain of responsibility)最佳实践O7 转换日期

    atitit.设计模式(1)---职责链模式(chain of responsibility)最佳实践O7 日期转换 1. 需求:::日期转换 1 2. 能够选择的模式: 表格模式,责任链模式 1 3 ...

  7. PHP訪问MySql数据库 0基础篇

    在站点后台,常常要与数据库打交道.本文介绍怎样使用XAMPP来管理MySql数据库及怎样用PHP来訪问MySql数据库. 一．使用XAMPP来管理MySql数据库 首先使用XAMPP打开MySql的管 ...

  8. org.hibernate.MappingException: Could not determine type for: java.util.List, at table: user, for...

    异常详情: Caused by: org.hibernate.MappingException: Could not determine type for: java.util.List, at ta ...

  9. 如何更好地理解和使用Github

    只知道几乎在顶部看到一对Github用通俗易懂的解释: 你或许不懂怎样造一辆凯迪拉克,但你能够驾驶凯迪拉克. 你或许不懂Evernote是用什么技术做出来的,但你也能够使用Evernote. 你或许不 ...

  10. C#中调用c++的dll具体创建与调用步骤，亲测有效~

    使用的工具是VS2010哦~其他工具暂时还没试过 我新建的工程名是my21dll,所以会生成2个同名文件.接下来需要改动的只有画横线的部分 下面是my21dll.h里面的... 下面的1是自动生成的不 ...