JS動態加入option和刪除option(附實例程式碼)_javascript技巧

1.動態建立select

複製程式碼 程式碼如下:

function create選擇>var mySelect = document.createElement("select");
mySelect.id = "mySelect";
document.body.appendChild(mySelect);
}

2 .新增選項option

複製程式碼 程式碼如下:

function 程式碼如下:


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

3.刪除所有選項option

複製程式碼

程式碼如下:

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

4.刪除一個選項。 >

複製程式碼 程式碼如下:

function removeOne(){
var obj=document. ');
//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); 🎜>

整個實例的完整程式碼如下： 複製程式碼

程式碼如下:

函數$(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.createTextNode("上海"))
var myOption1= document.createElement( "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)
}
;

選擇>

身體>