標準的做法就是 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body onload="f()">
<select id="s">
<option value="55">就是這樣的。</option>
</select>
</body>
<script>
function f(){
var s = document.getElementById('s');
for(var i=0; i<10; i++){
var option = document.createElement('option');
//s.insertBefore(option,s.options[0]);
/**//* 標準做法使用 s.options.add() */
s.options.add(option)
/**//* 非標準做法就是用 insertBefore 或者 appendChild */
//s.appendChild(option);
option.text = 'hello' + i;
//option.innerHTML = 'Hello' + i;
option.value = i;
// s.appendChild(option);
}
/**//* 當且僅當用 s.options.add() 添加項時才有效 */
s.selectedIndex = 4 ;
}
</script>
</html>
也就是說，標準的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下兩種方式之一:
1. s.appendChild(option);
option.text = 'hello world';
option.value =3;
也就是，一定要先添加到 select 中，然后再為 option 賦值。否則在 FF 下是顯示正常的，但是在 IE6 中顯示的是空白
2. 如果你要講 option.text 和 option.value 的賦值放在前面，那么請用 option.innerHTML 而不是 option.text
如下:
option.innerHTML = 'hello world';
opion.value = 3;
option.appendChild(option);
又看了一個牛人的博客，得到了第三種解決方式。
var op=document.createElement("option"); // 新建OPTION (op)
op.setAttribute("value",0); // 設置OPTION的 VALUE
op.appendChild(document.createTextNode("請選擇---")); // 設置OPTION的 TEXT
select.appendChild(op); // 為SELECT 新建一 OPTION(op)
也就是所，你的 op 的text 是通過 appendChild(.... createTextNode ) 來進行的。。
===========================
轉自:
http://blog.csdn.net/welcomejzh/archive/2008/10/28/3168820.aspx
摘抄如下:
/**//*
* 參數 :
* textValue: 文本值( 欲新建文本單元格文本值 )
* idName : ID 值 ( 欲新建文本單元格ID )
*/
function createTextE(obj,idName,textValue){
var span=document.createElement("span");
span.setAttribute("id",idName);
span.appendChild(text1=document.createTextNode(textValue));
obj.appendChild(span);
}
/**//*
* 用于為特定單元格置入 INPUT類型 元素(新建)
* 參數 :
* obj : 欲新建 INPUT 元素的宿主單元格對象
* textValue: 文本值( 欲新建文本單元格文本值 )
* idName : ID 值 ( 欲新建文本單元格ID )
*/
function createInputE(obj,idName,inputType,inputValue){
var span=document.createElement("span");
span.setAttribute("id",idName);
var input=document.createElement("input");
input.setAttribute("type",inputType);
input.setAttribute("value",inputValue);
span.appendChild(input);
obj.appendChild(span);
}
/**//*
* 用于生成SELECT元素
*/
function createSelectE(obj,idName){
var span=document.createElement("span");
span.setAttribute("id",idName);
var select=document.createElement("select"); // 新建SELECT元素
var op=document.createElement("option"); // 新建OPTION (op)
op.setAttribute("value",0); // 設置OPTION的 VALUE
op.appendChild(document.createTextNode("請選擇---")); // 設置OPTION的 TEXT
select.appendChild(op); // 為SELECT 新建一 OPTION(op)
span.appendChild(select);
obj.appendChild(span);
}
--------------------------------------------------------------------
實用例子
var index=0;
function addRow(){
index++;
// 要增刪行的TABLE (tbody)
t = document.getElementById("omain");
objRow = t.insertRow(0); // 在TABLE中增加ROW,也即<TR>
objCell=objRow.insertCell(0); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","goodsid");
createTextE(objCell,"goodsid",index); // 商品編號 goodsid
objCell=objRow.insertCell(1); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","goodsname");
createSelectE(objCell,"goodsname");
objCell=objRow.insertCell(2); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","price");
createTextE(objCell,"price","2.3（單價）");
objCell=objRow.insertCell(3); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","count");
createInputE(objCell,"count","text",index); // 訂購天數
objCell=objRow.insertCell(4); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","dcount");
createInputE(objCell,"dcount","text",index); // 每天數量
objCell=objRow.insertCell(5); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","totleprice");
createTextE(objCell,"totleprice","總價"+index); // 總價
objCell=objRow.insertCell(6); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","send");
createTextE(objCell,"send","獲贈"+index); //
objCell=objRow.insertCell(7); // 在行中增加單元格 也即<TD>
objCell.setAttribute("id","bdel");
createInputE(objCell,"bdel","button","刪除"+index);
}
posted on 2008-12-15 22:27
CopyHoo 閱讀(4978)
評論(0) 編輯 收藏 所屬分類:
Java Web