管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

javascript对select标签的控制(option选项/select)

　　html中的select标签，也是asp.net中的asp:DropDownList控件。

　　javascript对它们的操作

　　一、基础理解

　　

复制代码 代码如下:

　　var e = document.getElementById("selectId");

　　e. options= new Option("文本","值") ;

　　//创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>

　　//options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签

　　1:options[ ]数组的属性:

　　length属性---------长度属性

　　selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)

　　2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个---)

　　text属性---------返回/指定 文本

　　value属性------返回/指定 值，与<options value="...">一致。

　　index属性-------返回下标,

　　selected 属性-------返回/指定该对象是否被选中.通过指定 true 或者 false，可以动态的改变选中项

　　defaultSelected 属性-----返回该对象默认是否被选中。true / false。

　　3:option的方法

　　增加一个<option>标签-----obj.options.add(new("文本","值"));<增>

　　删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>

　　获得一个<option>标签的文本-----obj.options[obj.selectedIndex].text<查>

　　修改一个<option>标签的值-----obj.options[obj.selectedIndex]=new Option("新文本","新值")<改>

　　删除所有<option>标签-----obj.options.length = 0

　　获得一个<option>标签的值-----obj.options[obj.selectedIndex].value

　　注意:

　　a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.

　　b:obj.option中的option不需要大写,new Option中的Option需要大写

　　二 、应用

　　

复制代码 代码如下:

　　<html>

　　<head>

　　<script language="javascript">

　　function number(){

　　var obj = document.getElementById("mySelect");

　　//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变

　　//obj.options.add(new Option("我的吃吃","4"));再添加一个option

　　//alert(obj.selectedIndex);//显示序号，option自己设置的

　　//obj.options[obj.selectedIndex].text = "我的吃吃";更改值

　　//obj.remove(obj.selectedIndex);删除功能

　　}

　　</script>

　　</head>

　　<body>

　　<select id="mySelect">

　　<option>我的包包</option>

　　<option>我的本本</option>

　　<option>我的油油</option>

　　<option>我的担子</option>

　　</select>

　　<input type="button" name="button" value="查看结果" onclick="number();">

　　</body>

　　</html>

　　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("文本","值")); //这个只能在IE中有效

　　obj.options.add(new Option("text","value")); //这个兼容IE与firefox

　　}

　　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);

　　}

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">

　　<html>

　　<head>

　　<meta http-equiv="Content-Type" content="text/html">

　　<head>

　　<script language=JavaScript>

　　function $(id)

　　{

　　return document.getElementById(id)

　　}

　　function show()

　　{

　　var selectObj=$("area")

　　var myOption=document.createElement("option")

　　myOption.setAttribute("value","10")

　　myOption.appendChild(document.createTextNode("上海"))

　　var myOption1=document.createElement("option")

　　myOption1.setAttribute("value","100")

　　myOption1.appendChild(document.createTextNode("南京"))

　　selectObj.appendChild(myOption)

　　selectObj.appendChild(myOption1)

　　}

　　function choice()

　　{

　　var index=$("area").selectedIndex;

　　var val=$("area").options[index].getAttribute("value")

　　if(val==10)

　　{

　　var i=$("context").childNodes.length-1;

　　var remobj=$("context").childNodes[i];

　　remobj.removeNode(true)

　　var sh=document.createElement("select")

　　sh.add(new Option("浦东新区","101"))

　　sh.add(new Option("黄浦区","102"))

　　sh.add(new Option("徐汇区","103"))

　　sh.add(new Option("普陀区","104"))

　　$("context").appendChild(sh)

　　}

　　if(val==100)

　　{

　　var i=$("context").childNodes.length-1;

　　var remobj=$("context").childNodes[i];

　　remobj.removeNode(true)

　　var nj=document.createElement("select")

　　nj.add(new Option("玄武区","201"))

　　nj.add(new Option("白下区","202"))

　　nj.add(new Option("下关区","203"))

　　nj.add(new Option("栖霞区","204"))

　　$("context").appendChild(nj)

　　}

　　}

　　function calc()

　　{

　　var x=$("context").childNodes.length-1;

　　alert(x)

　　}

　　function remove()

　　{

　　var i=$("context").childNodes.length-1;

　　var remobj=$("context").childNodes[i];

　　remobj.removeNode(true)

　　}

　　</script>

　　<body><div id="context">

　　<select id="area" on

　　change="choice()">

　　</select>

　　</div>

　　<input type=button value="显示" onclick="show()">

　　<input type=button value="计算结点" onclick="calc()">

　　<input type=button value="删除" onclick="remove()">

　　</body>

　　</html>

　　根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:

　　JS代码:(只取了于SELECT相关的代码)

　　

复制代码 代码如下:

　　/**

　　* @description 构件联动下拉列表 (用JQUERY 的AJAX配合JSON实现)

　　* @prarm selectId 下拉列表的ID

　　* @prarm method 要调用的方法名称

　　* @prarm temp 此处存放软件ID

　　* @prarm url 要跳转的地址

　　*/

　　function linkAgeJson(selectId,method,temp,url){

　　$j.ajax({

　　type: "get",//使用get方法访问后台

　　dataType: "json",//返回json格式的数据

　　url: url,//要访问的后台地址

　　data: "method=" + method+"&temp="+temp,//要发送的数据

　　success: function(msg){//msg为返回的数据，在这里做数据绑定

　　var data = msg.lists;

　　coverJsonToHtml(selectId,data);

　　}

　　});

　　}

　　/**

　　* @description 将JSON数据转换成HTML数据格式

　　* @prarm selectId 下拉列表的ID

　　* @prarm nodeArray 返回的JSON数组

　　*

　　*/

　　function coverJsonToHtml(selectId,nodeArray){

　　//get select

　　var tempSelect=$j("#"+selectId);

　　//clear select value

　　isClearSelect(selectId,'0');

　　var tempOption=null;

　　for(var i=0;i<nodeArray.length;i++){

　　//create select Option

　　tempOption= $j('<option value="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> ');

　　//put Option to select

　　tempSelect.append(tempOption);

　　}

　　// 获取退化构件列表

　　getCpgjThgl(selectId,'thgjDm');

　　}

　　/**

　　* @description 清空下拉列表的值

　　* @prarm selectId 下拉列表的ID

　　* @prarm index 开始清空的下标位置

　　*/

　　function isClearSelect(selectId,index){

　　var length=document.getElementById(selectId).options.length;

　　while(length!=index){

　　//长度是在变化的，因为必须重新获取

　　length=document.getElementById(selectId).options.length;

　　for(var i=index;i<length;i++)

　　document.getElementById(selectId).options.remove(i);

　　length=length/2;

　　}

　　}

　　/**

　　* @description 获取退化构件列表

　　* @prarm selectId1 引用软件下拉列表的ID

　　* @prarm selectId2 退化构件下拉列表的ID

　　*/

　　function getCpgjThgl(selectId1,selectId2){

　　var obj1=document.getElementById(selectId1);//引用软件下拉列表

　　var obj2=document.getElementById(selectId2);//退化构件下拉列表

　　var len=obj1.options.length;

　　//当引用软件列表长度等于1时返回，不做操作

　　if(len==1){

　　return false;

　　}

　　//清空下拉列表的值，两种方式都可以

　　// isClearSelect(selectId2,'1');

　　document.getElementById(selectId2).length=1;

　　for(var i=0;i<len; i++){

　　var option= obj1.options[i];

　　//引用软件被选中项不加入

　　if(i!=obj1.selectedIndex){

　　//克隆OPTION并添加到SELECT中

　　obj2.appendChild(option.cloneNode(true));

　　}

　　}

　　}

　　HTML代码:

　　

复制代码 代码如下:

　　<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1>

　　<tr>

　　<td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件：</td>

　　<td class="Search_content_82">

　　<input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" >

　　<input name="yyrjDm" id="yyrjDm" type="hidden" >

　　<input type="button" class="Search_button_select"

　　onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1');" value="选择...">

　　</td>

　　</tr>

　　<tr>

　　<td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版：</td>

　　<td class="Search_content" id="yyfb">

　　<select name="yyfbDm" style="width:160" id="yyfbDm" onChange="getCpgjThgl('yyfbDm','thgjDm')">

　　</select>

　　</td>

　　</tr>

　　<tr>

　　<td class="Search_item">退化构件：</td>

　　<td class="Search_content" id="thgj">

　　<select name="thgjDm" style="width:160" id="thgjDm">

　　<option value="-1" selected>无</option>

　　</select>

　　</td>

　　</tr>

　　</TABLE>

教程首页 更多教程