<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. soc与cpu区别

    soc(System on Chip)片上系统cpu只包括运算器和控制器.早期 的系统是指在PCB上有cpu和Nand控制器,LCD控制器之类的控制器,构成一个系统. cpu和这些控制器之间用pcb板 ...

  2. [LeetCode] Longest Common Prefix 字符串公有前序

    Write a function to find the longest common prefix string amongst an array of strings. Hide Tags Str ...

  3. no update

    cd /home/.gnupg/ mv gpg.conf gpgbake.conf pacman -S archlinux-keyring && pacman -Syu 如果还是不行, ...

  4. FTP上传文件服务器python实现

    总结 使用Python的socket和socketserver模块实现ftp文件服务器.不是很难,但在粘包的问题上纠缠了不少时间.解决办法是发送文件信息之后等待一段时间. #!/usr/bin/pyt ...

  5. 二叉树遍历 Morris

    二叉树的遍历,先根遍历,不适用递归,存储空间为 O(1) 转自:http://chuansongme.com/n/100461 MorrisInOrder(): while 没有结束 如果当前节点没有 ...

  6. 慎用lodash的cloneDeep函数

    lodash的cloneDeep函数能够很方便的拷贝对象,但是一旦拷贝一些很复杂的对象就有可能报错.比如用cloneDeep克隆一个vue实例,就有可能包key.charAt is not a Fun ...

  7. A Wasserstein Distance[贪心/模拟]

    链接:https://www.nowcoder.com/acm/contest/91/A来源:牛客网 最近对抗生成网络(GAN)很火,其中有一种变体WGAN,引入了一种新的距离来提高生成图片的质量.这 ...

  8. FZU 2125 简单的等式 【数学/枚举解方程式】

    现在有一个等式如下:x^2+s(x,m)x-n=0.其中s(x,m)表示把x写成m进制时,每个位数相加的和.现在,在给定n,m的情况下,求出满足等式的最小的正整数x.如果不存在,请输出-1. Inpu ...

  9. MyBatis一级缓存（转载）

    <深入理解mybatis原理> MyBatis的一级缓存实现详解 及使用注意事项 http://demo.netfoucs.com/luanlouis/article/details/41 ...

  10. 寒假week1---二分查找（二分枚举）

    寒假week1---二分查找(二分枚举)1.适用条件:要查找(枚举)的集合有序 && 查找(枚举)的“条件”具有单调性2.什么是“条件”:example: 1.给定一个有序数组,从中查 ...