HTML中Select的使用详解

<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 οnlοad="onload()">


<SELECT NAME="Cats" SIZE="1">
<OPTION VALUE="1">Calico
<OPTION VALUE="2">Tortie
<OPTION VALUE="3" SELECTED>Siamese
</SELECT>

<P>

<SELECT ID="oSelect" NAME="Cars" SIZE="3" MULTIPLE> 
<OPTION VALUE="1" SELECTED>BMW
<OPTION VALUE="2">Porsche
<OPTION VALUE="3" SELECTED>Mercedes
</SELECT>

</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被中

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的使用详解相关推荐

mysql中select是什么意思_MYSQL中select的是详解
数据表都已经创建起来了,假设我们已经插入了许多的数据,我们就可以用自己喜欢的方式对数据表里面的信息进行检索和显示了,比如说:可以象下面这样把整个数据表内的内容都显示出来 select * from p ...
Python中的select、epoll详解
Python中的select.epoll详解文章目录 Python中的select.epoll详解一.select 1.相关概念 2.select的特性 1.那么单进程是如何实现多并发的呢??? ...
SQL语句 SELECT LIKE用法详解
在SQL结构化查询语言中,LIKE语句有着至关重要的作用. LIKE语句的语法格式是:select * from 表名 where 字段名 like 对应值(子串),它主要是针对字符型字段的,它的作用 ...
c if 判断select已经选择的值_「Linux」——select和epoll详解
select和epoll详解 select和epoll的区别(面试常考) select 一.什么是select 1.select函数原型 2.参数解释 3.参数timeout取值 4.返回值 5.监控 ...
one-many和many-one的关系中的inverse的详解
在one-many和many-one的关系中的inverse的详解. 1.现在假设有两个类Customer与Order,一个Customer可以有多个Order 2. 如果在Customer.hbm. ...
mysql in从数据库取数_MySQL数据库中 where in 用法详解
本文主要向大家介绍了MySQL数据库中 where in 用法详解,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助. 这里分两种情况来介绍 WHERE column IN (valu ...
smarty手册-smarty中foreach循环语句详解
原文地址:smarty手册-smarty中foreach循环语句详解作者:谭博 {foreach}循环也有自身属性的变量,可以通过{$smarty.foreach.name.property}访问,其 ...
JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法: 1. type:事件的类型,如onlick中的click: 2. srcElement/target:事件源,就是发生事件的 ...
【C/C++服务器开发】文件，文件描述符，I/O多路复用，select / poll / epoll 详解
文章目录一.前言 1.文件的概念 2.文件描述符和文件指针文件描述符文件描述符和文件指针的区别文件描述符太多了怎么办二.I/O多路复用 1.I/O多路复用的由来不要打电话给我,有需要我会打 ...

HTML中Select的使用详解

HTML中Select的使用详解相关推荐

最新文章

热门文章