//依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;
}
複製程式碼
程式碼如下:
function removeOne(){
var getobjdocum. 'mySelect');
//index,要刪除選項的序號，這裡取目前選取選項的序號
var index=obj.selectedIndex;
obj.options.remove(index);
}
複製程式碼
複製程式碼
程式碼
🎜>
複製程式碼
複製程式碼
程式碼如下 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(' ' );
//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代碼:
