HTML select option基本了解及应用

javascript之HTML(select option)详解
1、基本了解:

拷贝编码
编码以下:

var e = document.getElementById("selectId");
e. options= new Option("文字","值") ;
//建立1个option目标,即在<select>标识中建立1个或好几个<option value="值">文字</option>
//options是个数字能量数组,里边能够储放好几个<option value="值">文字</option>这样的标识

1:options[ ]数字能量数组的特性:
length特性---------长度特性
selectedIndex特性--------当今被选定的框中的文字的数据库索引值,此数据库索引值是运行内存全自动分派的(0,1,2,3.....)对应(第1个文字值,第2个文字值,第3个文字值,第4个文字值..........)
2:单独option的特性(---obj.options[obj.selecedIndex]是特定的某个<option>标识,是1个---)
text特性---------回到/特定 文字
value特性------回到/特定 值,与<options value="...">1致。
index特性-------回到下标,
selected 特性-------回到/特定该目标是不是被选定.根据特定 true 或 false,能够动态性的更改选定项
defaultSelected 特性-----回到该目标默认设置是不是被选定。true / false。
3:option的方式
提升1个<option>标识-----obj.options.add(new("文字","值"));<增>
删掉1个<option>标识-----obj.options.remove(obj.selectedIndex)<删>
得到1个<option>标识的文字-----obj.options[obj.selectedIndex].text<查>
改动1个<option>标识的值-----obj.options[obj.selectedIndex]=new Option("新文字","新值")<改>
删掉全部<option>标识-----obj.options.length = 0
得到1个<option>标识的值-----obj.options[obj.selectedIndex].value
留意:
a:上面的写的是如这样种类的方式obj.options.function()而不写obj.funciton,是由于以便考虑到在IE和FF 下的适配,如obj.add()只能在IE中合理.
b:obj.option中的option不必须大写,new Option中的Option必须大写
2 、运用

拷贝编码
编码以下:

<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"));再加上1个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');
//加上1个选项
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.删掉1个选项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⑴;
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⑴;
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⑴;
alert(x)
}
function remove()
{
var i=$("context").childNodes.length⑴;
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完成了1个小作用以下:
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="⑴" selected>无</option>
</select>
</td>
</tr>
</TABLE>