<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. Action 和 Func 的用法以及区别

    Action 无返回值 Func 有返回值,且最后一个参数为返回值 Action用法 public static void test(string s) { Console.WriteLine(&qu ...

  2. AC日记——幸运号码 51nod 1043

    幸运号码 思路: 传说中的数位dp: 不难发现,n(n<1000) ,那么,n个数的最大和为9*1000=9000: 对于9000*1000的时间范围,我们可以用dp来解决: dp[i][j], ...

  3. HDU 1998 奇数阶魔方【模拟填数/注意边界和细节】

    奇数阶魔方 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  4. 对CSDN的理性吐槽

    CSDN博客网站首页挂了....从使用CSDN博客以来,大大小小的故障出过十几次.........再这样的话我都要对这个网站失去信心了

  5. codevs——2853 方格游戏（棋盘DP）

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解  题目描述 Description 菜菜看到了一个游戏,叫做方格游戏~ 游戏规则是这样的: 在一个n*n的 ...

  6. linux查看hostname以及修改hostname

    查看hostname   :   hostname 修改hostname   :   hostnamectl set-hostname  master (比如要修改为master) 修改完重启生效 : ...

  7. SDOI 2015 约束个数和

    Description: 共\(T \le 5 \times 10^4\)组询问, 每组询问给定\(n\)和\(m\), 请你求出 \[ \sum_{i = 1}^n \sum_{j = 1}^m \ ...

  8. 无法获得VMCI 驱动程序的版本: 句柄无效。

    写在前面 最近在电脑上安装了VMware虚拟机,在安装系统的使用,总提示错误“无法获得VMCI 驱动程序的版本: 句柄无效.”.最近刚买的电脑,也不会是系统的问题吧,为了装个虚机,总不能重装系统吧,没 ...

  9. ArcObject开发，“异常在 ESRI.ArcGIS.Version.dll”错误

    “System.DllNotFoundException”类型的未经处理的异常在 ESRI.ArcGIS.Version.dll 中发生 其他信息: 无法加载 DLL“ArcGISVersion.dl ...

  10. 在红米note4上实现自动安装软件

    因为要做自动化测试,需要对已发布的包进行回归手测,这个时候需要手动安装APK,但是红米会弹出继续安装的按钮,手点一次比较烦,想自动点"继续安装"按钮! 感谢先行者们的分享 本文参考 ...