JobPlus
JobPlus知识库 互联网 互联网+ 文章
【option基础理解】HTML select option基础理解及使用
个人头像
蔡烁坚
2017-12-19 9778人阅读 0人打赏

一、基础理解:


复制代码代码如下:


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> 

<s cript language="javas cript"> 

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);删除功能 

} 

</s cript> 

</head> 

<body> 

<select id="mySelect"> 

<option>我的包包</option> 

<option>我的本本</option> 

<option>我的油油</option> 

<option>我的担子</option> 

</select> 

<input type="button" name="button" value="查看结果" > 

</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" c> 

<head> 

<s cript language=Javas cript> 

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) 

} 

</s cript> 

<body> 

<div id="context"> 

<select id="area" on 

change="choice()"> 

</select> 

</div> 

<input type=button value="显示" > 

<input type=button value="计算结点" > 

<input type=button value="删除" > 

</body> 

</html>


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


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


复制代码代码如下:


/** 

* @des cription 构件联动下拉列表 (用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); 

} 

}); 

} 

/** 

* @des cription 将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'); 

} 

/** 

* @des cription 清空下拉列表的值 

* @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; 

} 

} 

/** 

* @des cription 获取退化构件列表 

* @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" 

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" > 

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


如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

¥ 打赏支持
168人赞 举报
分享到
用户评价(0)

暂无评价，你也可以发布评价哦:)

0 人收藏了这篇文章

相关文章

腾讯云数据库性能卓越稳定可靠，为您解决数据库运维难题
广告

关于我们

公司介绍

人才招聘

联系方式

法律声明

服务条款

权利声明

隐私声明

帮助中心

使用攻略

建议反馈

联系客服

网站地图

二维码
JobPlus官方公众号
微博
JobPlus官方微博
Copyright © jobplus.com.cn All rights reserved
苏州聘十信息技术有限公司 版权所有苏ICP备16046992号
扫码APP

扫描使用APP

扫码使用

扫描使用小程序