例如在select中添加option
JQuery做法:
<select id="myselect" name="myselect">
</select>
$("#myselect").append('<option value="-1">請選擇</option>');
js的做法:@參考文章
關於 select 的添加 option 應該注意的問題。
標准的做法如上
也就是說，標准的做法是 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);
3 第三種解決方式。
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)
select.options.length=0; //把select對象的所有option清除掉
select.options.remove(i); //把select對象的第i個option清除掉
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS動態添加刪除option</title>
<script>
//動態刪除select中的所有options：
function delAllOptions(){
document.getElementById("user_dm").options.length=0;
}
//動態刪除select中的某一項option：
function delOneOption(indx){
document.getElementById("user_dm").options.remove(indx);
}
// 動態添加select中的項option:
function addOneOption(){
//document.getElementById("user_dm").options.add(new Option(2,"mytest"));
var selectObj=document.getElementById("user_dm");
alert(selectObj.length);
selectObj.options[selectObj.length] = new Option("mytest", "2");
}
</script>
</head>
<body>
<select id="user_dm" name="user_dm">
<option value="0" selecte>==請選擇人員==</option>
<option value="1">test</option>
</select><br>
<input type="button" onClick="addOneOption()" value="添加">
<input type="button" onClick="delOneOption(1)" value="刪除第一個">
<input type="button" onClick="delAllOptions()" value="清空">
</body>
</html>
===============================================================================
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js動態添加與刪除Option對象</TITLE>
<script language="JavaScript">
// 添加選項
function addOption(pos){
var objSelect=document.getElementById("mySelect");
// 取得字段值
//var strName = document.myForm.myOptionName.value;
// var strValue = document.myForm.myOptionValue.value;
// 建立Option對象
var objOption = new Option("李高灰","bbbbbbbbb");
if (pos == -1&& pos > objSelect.options.length))
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}
// 刪除
function deleteOption(type){
var objSelect=document.getElementById("mySelect");
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 顯示選項信息
function showOption(){
var objSelect=document.getElementById("mySelect");
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
}
//動態刪除select中的所有options：
function clearAllOptions(){
var objSelect=document.getElementById("mySelect");
objSelect.options.length=0;
}
</script>