<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. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  2. oracle中的dual表详解

    oracle中的dual表详解 1.DUAL表的用途 Dual 是 Oracle中的一个实际存在的表,任何用户均可读取,常用在没有目标表的Select语句块中 --查看当前连接用户 SQL> s ...

  3. PHP开发中常见的安全问题详解和解决方法（如Sql注入、CSRF、Xss、CC等

    页面导航: 首页 → 网络编程 → PHP编程 → php技巧 → 正文内容 PHP安全 PHP开发中常见的安全问题详解和解决方法(如Sql注入.CSRF.Xss.CC等) 作者: 字体:[增加 减小 ...

  4. mysql中SQL执行过程详解与用于预处理语句的SQL语法

    mysql中SQL执行过程详解 客户端发送一条查询给服务器: 服务器先检查查询缓存,如果命中了缓存,则立刻返回存储在缓存中的结果.否则进入下一阶段. 服务器段进行SQL解析.预处理,在优化器生成对应的 ...

  5. Net Core中数据库事务隔离详解——以Dapper和Mysql为例

    Net Core中数据库事务隔离详解--以Dapper和Mysql为例 事务隔离级别 准备工作 Read uncommitted 读未提交 Read committed 读取提交内容 Repeatab ...

  6. Mysql中limit的用法详解

    Mysql中limit的用法详解 在我们使用查询语句的时候,经常要返回前几条或者中间某几行数据,为我们提供了limit这样一个功能. SELECT * FROM table LIMIT [offset ...

  7. Oracle中的substr()函数 详解及应用

    注:本文来源于<Oracle中的substr()函数 详解及应用> 1)substr函数格式   (俗称:字符截取函数) 格式1: substr(string string, int a, ...

  8. 分享知识-快乐自己：Hibernate 中Criteria Query查询详解

    1):Hibernate 中Criteria Query查询详解 当查询数据时,人们往往需要设置查询条件.在SQL或HQL语句中,查询条件常常放在where子句中. 此外,Hibernate还支持Cr ...

  9. 关于 redux-saga 中 take 使用方法详解

    本文介绍了关于redux-saga中take使用方法详解,分享给大家,具体如下: 带来一个自己研究好久的API使用方法. redux-saga中effect中take这个API使用方式,用的多的是ca ...

随机推荐

  1. Matcher类详解

    java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 它包括两个类:Pattern和Matcher . Pattern: 一个Pattern是一个正则表达式经编 ...

  2. cookie、session、localStorage、sessionStorage区别

    cookie.session 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份 ...

  3. 横竖屏切换，activity重建问题

    最近有个需求,横屏直播A退出后返回直播列表页B(竖屏)时,在小米8上列表页B直接变成横屏的了,因为列表页B由竖屏切换成横屏了,还会重新执行生命周期onCreate()-onResume()等等. 为了 ...

  4. 关于超大binlog事件的问题

    我手里维护了一个项目,其功能是用Java模拟一个MariaDB的slave库连接到主库,对从主库传输过来的binlog事件进行监听与分析 碰到一个问题是: 如果主库做了一个很大的修改操作(比方说直接d ...

  5. C++多线程(POSIX)

    #include<iostream> #include<pthread.h> #include<ctime> #include<windows.h> u ...

  6. bzoj 2889: Tree Conundrum

    2889: Tree Conundrum Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 61  Solved: 37[Submit][Status][ ...

  7. 搭建 Maven ---基础入门

    这篇随笔从最基础的控制台  搭建maven讲,后面再升入的讲解IDEA搭建Maven. 一,Maven是什么?作用是什么? Maven是一个项目管理工具,它包含了一个项目对象模型 (Project O ...

  8. 2016北京集训测试赛（十四）Problem B: 股神小D

    Solution 正解是一个\(\log\)的link-cut tree. 将一条边拆成两个事件, 按照事件排序, link-cut tree维护联通块大小即可. link-cut tree维护子树大 ...

  9. 转：Maven项目中获取classpath和资源文件的路径

    假设资源文件放在maven工程的 src/main/resources 资源文件夹下,源码文件放在 src/main/java/下, 那么java文件夹和resources文件夹在运行时就是class ...

  10. Linux内核网络栈源代码分析

    http://blog.csdn.net/column/details/linux-kernel-net.html