<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. 为了兼容性问题，本人一律淘汰不兼容如下三种浏览器的js

    原文发布时间为:2009-04-16 -- 来源于本人的百度文章 [由搬家工具导入] JavaScript： 不兼容 IE    FF火狐   Google 一律不作收藏了。。。。 最好还能兼容 Op ...

  2. [wxPython学习]wx.CallAfter和wx.FutureCall

    [wxPython学习]wx.CallAfter和wx.FutureCall 今天才学到的两个wxPython中的函数:wx.CallAfter和wx.FutureCall.这是两个无关的函数,但又多 ...

  3. FormatDateTime 当前时间减去几小时的做法

    top_start_modified := FormatDateTime('yyyy-mm-dd hh:mm:ss',(Now - ((1/24)*3)));    top_end_modified ...

  4. CSU 1777: 大还是小？【模拟/后导0】

    293419 roniking 1777 Accepted 2032 0 C++ 2000 2018-04-03 19:21:25 Description 输入两个实数,判断第一个数大,第二个数大还是 ...

  5. Codeforces Round #324 (Div. 2) Marina and Vasya 乱搞推理

    原题链接:http://codeforces.com/contest/584/problem/C 题意: 定义$f(s1,s2)$为$s1,s2$不同的字母的个数.现在让你构造一个串$s3$,使得$f ...

  6. vue开发小程序简介

    开发环境搭建 nodejs 安装最新版的nodejs,同时安装cnpm包管理器 jdk1.8 apache-maven3.3.9 Intellij Idea2018 [后端开发工具] vscode[前 ...

  7. asp.net简单定时任务实现

    代码如下: public class TimeTask { #region 单例 private static TimeTask _task = null; public static TimeTas ...

  8. Difference between a Hard Link and Soft (Symbolic) Link

    Within the Unix/Linux file system, linking lets you create file shortcuts to link one or more files. ...

  9. 小菜的系统框架界面设计-XiaoCai.WinformUI代码开源

    我的源码分享 曾经,看到别人漂亮的系统界面,合理的布局,可是却没有提供源码,道理很简单,就是有偿提供,实际上对于有些技巧的东西也并没有多么难,只是不懂原理,感觉到困难罢了. 而对于刚毕业的我,求知欲强 ...

  10. centos中httpd Server not started: (13)Permission denied: make_sock: could not bind to address [::]:8888

    Install semanage tools: sudo yum -y install policycoreutils-python Allow port 88 for httpd: sudo sem ...