javascript對select標籤的控制(option選項/select)_javascript技巧

html中的select標籤，也是asp.net中的asp:DropDownList控制項。
javascript對它們的操作
一、基礎理解

複製代碼 代碼如下:

var e = document.getElementById("selectId");
e. options= new Option("文字","值") ;
//建立一個option物件,即在標籤中建立一個或多個文字
//options是個陣列,裡面可以存放多個文字 option>這樣的標籤

1:options[ ]陣列的屬性:
length屬性---------長度屬性
selectedIndex屬性------ --目前被選取的方塊中的文字的索引值,此索引值是記憶體自動分配的(0,1,2,3.....)對應(第一個文字值,第二個文字值,第三個文字值,第四個文字值..........)
2:單一option的屬性(---obj.options[obj.selecedIndex]是指定的某個標籤,是一個---)
text屬性---------回傳/指定文字
value屬性------傳回/指定值，與一致。
index屬性-------傳回下標,
selected 屬性-------傳回/指定該物件是否被選取.透過指定true 或false，可以動態的變更選取項
defaultSelected 屬性-----傳回該物件預設是否被選取。 true / false。
3:option的方法
增加一個標籤-----obj.options.add(new("文字","值"));
刪除一個 標籤-----obj.options.remove(obj.selectedIndex)
取得一個 標籤的文字-----obj.options[obj.selectedIndex].text
修改一個 標籤的值-----obj.options[obj.selectedIndex]=new Option("新文字","新值")
刪除所有 標籤- ----obj.options.length = 0
得到一個 標籤的值-----obj.options[obj.selectedIndex].value
注意:
a:上面的寫的是如這樣類型的方法obj.options.function()而不寫obj.funciton,是因為為了考慮在IE和FF 下的兼容,如obj.add()只能在IE中有效.
b :obj.option中的option不需要大寫,new Option中的Option需要大寫
二、應用

複製代碼 程式碼如下:

我的包包
我的本本
我的油油
我的擔子

1.動態建立select

複製程式碼 程式碼如下:

function createSelect(){ var. ("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

2.新增選項

複製程式碼 程式碼如下:

function addOption(){

//依id>//依id
var obj=document.getElementById('mySelect');
//新增一個選項
obj.add(new Option("文字","值")); //這個只能在IE中有效
obj.options.add(new Option("text","value")); //這個相容IE與firefox
}


3.刪除所有選項option

複製程式碼 程式碼如下:

程式碼如下:


Allftion; ){

var obj=document.getElementById('mySelect');
obj.options.length=0;
}

4.刪除一個選項

複製程式碼

程式碼如下:


function removeOne(){
var getobjdocum. '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);
}





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= Element. ("option")
myOption1.setAttribute("value","100")
myOption1.appendChild(document.createTextNode("南京"))
selectObj.appendChild(myOption) }
函數choice()
{
var index=$("area").selectedIndex;
var val=$("區域").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.長度-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)
}
函式刪除()
{
var i=$("context").childNodes.length-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
}
;

change="choice()"上選擇 id="area">
選擇>

身體>



根據這些東西，自己用JQEURY AJAX JSON實現了一個小功能如下：

JS程式碼:(只取了與SELECT相關的程式碼)

複製程式碼程式碼如下：

/**
* @description 構件聯動下拉清單(用JQUERY 的AJAX配合JSON實作)
* @prarm selectId 下拉清單的ID
* @prarm method 要呼叫的方法名稱
* @prarm tempage>* @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 Select=$ j("#" selectId);
//clear select value
isClearSelect(selectId,'0');
var tempOption=null;
for(var i=0;i//create select Option
tempOption= $j('' nodeArray[i].mc ' ' );
//put Option to select
tempSelect.append(tempOption);
}
// 取得退化構件清單
getCpgjThgl(selectId,'thgjDm');
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 document.getElementById(selectId).options.remove(i);
length=length/2;
}
}
/**
* @description 取得退化構件清單
* @prarm selectId1 引用軟體下拉清單的ID
* @prarm selectId2 退化構件下拉清單的ID
*/
function getCpgjglse( selectId2){
var obj1=document.getElementById(selectId1);//引用軟體下拉清單
var obj2=document.getElementById(selectId2);//退化構件下拉清單
var oplentions .length;
//當引用軟體列表長度等於1時返回，不做操作
if(len==1){
return false;
}
//清空下拉列表的值，兩種方式都可以
// isClearSelect(selectId2,'1');
document.getElementById(selectId2).length=1;
for(var i=0;ivar option= obj1.options[i];
//引用軟體被選取項目不加入
if(i!=obj1.selectedIndex){
//克隆OPTION並加入到SELECT
obj2.appendChild(option.cloneNode(true));
}
}
}

HTML代碼:

複製程式碼 程式碼如下:

*引用軟體：	onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree' ,'1');" value="選擇...">
*引用分版：
退化構件：	無