var op=document.createElement("option");
op.text=clos[i];
op.value=clos[i];
//sel.options.add(new Option(clos[i],clos[i]));
sel.options.add(op);
}
----------------------------------------------------------------
Option里面的四個(gè)參數(shù)分別的意思
new Option (text,value,defaultselected,selected)
new Option (文本,值,默認(rèn)選中的選項(xiàng),選中的選項(xiàng))
看測(cè)試結(jié)果就懂了
<select id="s1"></select>
<script>
var op = new Option("顯示文本1","值1",false,false);
s1.options.add(op);
op = new Option("顯示文本2","值2",false,true);
s1.options.add(op);
</script>
-----------------------------------------------------------------
3.刪除所有選項(xiàng)option
Javascript代碼
function removeAll(){
var obj=document.getElementById('mySelect');
obj.options.length=0;
}
4.刪除一個(gè)選項(xiàng)option
Javascript代碼
function removeOne(){
var obj=document.getElementById('mySelect');
//index,要?jiǎng)h除選項(xiàng)的序號(hào)，這里取當(dāng)前選中選項(xiàng)的序號(hào)
var index=obj.selectedIndex;
obj.options.remove(index);
}
5.獲得選項(xiàng)option的值
Javascript代碼
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào)
var val = obj.options[index].value;
6.獲得選項(xiàng)option的文本
Javascript代碼
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào)
var val = obj.options[index].text;
7.修改選項(xiàng)option
Javascript代碼
var obj=document.getElementById('mySelect');
var index=obj.selectedIndex; //序號(hào)，取當(dāng)前選中選項(xiàng)的序號(hào)
var val = obj.options[index]=new Option("新文本","新值");
8.刪除select
Javascript代碼
function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}
整個(gè)實(shí)例的完整代碼如下：
Javascript代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "
<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-1;
var remobj=$("context").childNodes[i];
remobj.removeNode(true)
var sh=document.createElement("select")
sh.add(new Option("浦東新區(qū)","101"))
sh.add(new Option("黃浦區(qū)","102"))
sh.add(new Option("徐匯區(qū)","103"))
sh.add(new Option("普陀區(qū)","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("玄武區(qū)","201"))
nj.add(new Option("白下區(qū)","202"))
nj.add(new Option("下關(guān)區(qū)","203"))
nj.add(new Option("棲霞區(qū)","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)
}
</script>
<body>
<div id="context">
<select id="area" onchange="choice()">
</select>
</div>
<input type=button value="顯示" onclick="show()">
<input type=button value="計(jì)算結(jié)點(diǎn)" onclick="calc()">
<input type=button value="刪除" onclick="remove()">
</body>
</html>
改進(jìn)版：在select中添加、修改、刪除option元素
Javascript代碼
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var word = document.createElement("OPTION");
word.text = arguments[i];
watch.keywords.add(word); // watch. is form name
}
}
function watch_add(f){ // 增加
var word = document.createElement("OPTION");
word.text = f.word.value;
f.keywords.add(word);
}
但上述 add() 方法只在IE下有效，為兼容FF和Opera，對(duì)上述代碼進(jìn)行了一下改進(jìn)，改動(dòng)后代碼如下： function watch_ini(){ // 初始
Javascript代碼
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect")[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords[f.keywords.length]=oOption;
}
