87,996
社区成员
发帖
与我相关
我的任务
分享怎样动态在select增加、删除option项目？
怎样动态在select增加、删除option项目？
我用了insertAdjacentHTML()方法但是不行，也不太清楚这方法是否可以实现？
我用了insertAdjacentHTML()方法但是不行，也不太清楚这方法是否可以实现？
...全文
请发表友善的回复…
发表回复
chen_guo_quan 2002-05-17
- 打赏
- 举报
<script language="JavaScript">
<!--
//添加选项
function addOption(formName)
{
var oOption = document.createElement("OPTION")；
oOption.text="新添的选项"；
oOption.value="新添的选项"；
formName.selectName.add(oOption)；
}
//删除所有的选项
function delAllOption(formName)
{
var j=formName.selectName.length；
for(var i=j-1;i>=0;i--)
{
formName.selectName.remove(i)；
}
}
//-->
</script>
.
.
.
.
<form name="formName">
//写下你的select和button onClick="addOption(this.form)" or
//onClick="delAllOption(this.form)"
</form>
<!--
//添加选项
function addOption(formName)
{
var oOption = document.createElement("OPTION")；
oOption.text="新添的选项"；
oOption.value="新添的选项"；
formName.selectName.add(oOption)；
}
//删除所有的选项
function delAllOption(formName)
{
var j=formName.selectName.length；
for(var i=j-1;i>=0;i--)
{
formName.selectName.remove(i)；
}
}
//-->
</script>
.
.
.
.
<form name="formName">
//写下你的select和button onClick="addOption(this.form)" or
//onClick="delAllOption(this.form)"
</form>
qiushuiwuhen 2002-05-16
- 打赏
- 举报
msdn上就有
insertAdjacentHTML Method
--------------------------------------------------------------------------------
Inserts the given HTML text into the element at the location.
Syntax
object.insertAdjacentHTML(sWhere, sText)
Parameters
sWhere Required. String that specifies where to insert the HTML text, using one of the following values: beforeBegin Inserts sText immediately before the object.
afterBegin Inserts sText after the start of the object but before all other content in the object.
beforeEnd Inserts sText immediately before the end of the object but after all other content in the object.
afterEnd Inserts sText immediately after the end of the object.
sText Required. String that specifies the HTML text to insert. The string can be a combination of text and HTML tags. This must be well-formed, valid HTML or this method will fail.
Return Value
No return value.
Remarks
If the text contains HTML tags, the method parses and formats the text as it is inserted.
You cannot insert text while the document is loading. Wait for the onload event to fire before attempting to call this method.
As of Microsoft® Internet Explorer 5, this method is accessible at run time. If elements are removed at run time, before the closing tag is parsed, areas of the document might not render.
When using the insertAdjacentHTML method to insert script, you must include the DEFER attribute in the SCRIPT element.
insertAdjacentHTML Method
--------------------------------------------------------------------------------
Inserts the given HTML text into the element at the location.
Syntax
object.insertAdjacentHTML(sWhere, sText)
Parameters
sWhere Required. String that specifies where to insert the HTML text, using one of the following values: beforeBegin Inserts sText immediately before the object.
afterBegin Inserts sText after the start of the object but before all other content in the object.
beforeEnd Inserts sText immediately before the end of the object but after all other content in the object.
afterEnd Inserts sText immediately after the end of the object.
sText Required. String that specifies the HTML text to insert. The string can be a combination of text and HTML tags. This must be well-formed, valid HTML or this method will fail.
Return Value
No return value.
Remarks
If the text contains HTML tags, the method parses and formats the text as it is inserted.
You cannot insert text while the document is loading. Wait for the onload event to fire before attempting to call this method.
As of Microsoft® Internet Explorer 5, this method is accessible at run time. If elements are removed at run time, before the closing tag is parsed, areas of the document might not render.
When using the insertAdjacentHTML method to insert script, you must include the DEFER attribute in the SCRIPT element.
weidegong 2002-05-16
- 打赏
- 举报
insertAdjacentHTML()是对Table操作的
<html>
<head>
<title>table</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script language="javascript">
function show(strOperator)
{
var objChecked = document.getElementsByName("checkboxbutton");
for(var nLoop = 0; nLoop < objChecked.length; nLoop++)
{
if(!objChecked[nLoop].checked)continue;
switch(strOperator)
{
case "add" :
mytable.rows[mytable.rows.length - 1].insertAdjacentElement("afterEnd", mytable.rows[nLoop].cloneNode(true));
break;
case "hide":
mytable.rows[nLoop].style.visibility="hidden";
break;
case "delete":
mytable.deleteRow(nLoop);
nLoop--;
break;
}
}
}
document.onkeydown=moveFocus;
var nPos = 0;
function moveFocus()
{
var objInput = document.getElementsByName("textfield");
var nKeycode = event.keyCode;
if(nKeycode == 38 || nKeycode == 40)
{
if(nKeycode == 40)nPos++;
else nPos--;
if(nPos < 0) nPos = 0;
else if(nPos > objInput.length - 1)nPos = objInput.length - 1;
objInput[nPos].focus();
}
}
</script>
<body bgcolor="#FFFFFF">
<table width="90%" border="1" id="mytable">
<tr>
<td>
<input type="text" name="textfield">
</td>
<td>
<input type="checkbox" name="checkboxbutton" value="radiobutton">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield">
</td>
<td>
<input type="checkbox" name="checkboxbutton" value="radiobutton">
</td>
</tr>
</table>
<p>
<input type="button" name="Button" value=" add " onClick="show('add');">
<input type="button" name="Button2" value=" delete " onClick="show('delete');">
<input type="button" name="Button3" value=" hide " onClick="show('hide');">
</p>
</body>
</html>
<html>
<head>
<title>table</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<script language="javascript">
function show(strOperator)
{
var objChecked = document.getElementsByName("checkboxbutton");
for(var nLoop = 0; nLoop < objChecked.length; nLoop++)
{
if(!objChecked[nLoop].checked)continue;
switch(strOperator)
{
case "add" :
mytable.rows[mytable.rows.length - 1].insertAdjacentElement("afterEnd", mytable.rows[nLoop].cloneNode(true));
break;
case "hide":
mytable.rows[nLoop].style.visibility="hidden";
break;
case "delete":
mytable.deleteRow(nLoop);
nLoop--;
break;
}
}
}
document.onkeydown=moveFocus;
var nPos = 0;
function moveFocus()
{
var objInput = document.getElementsByName("textfield");
var nKeycode = event.keyCode;
if(nKeycode == 38 || nKeycode == 40)
{
if(nKeycode == 40)nPos++;
else nPos--;
if(nPos < 0) nPos = 0;
else if(nPos > objInput.length - 1)nPos = objInput.length - 1;
objInput[nPos].focus();
}
}
</script>
<body bgcolor="#FFFFFF">
<table width="90%" border="1" id="mytable">
<tr>
<td>
<input type="text" name="textfield">
</td>
<td>
<input type="checkbox" name="checkboxbutton" value="radiobutton">
</td>
</tr>
<tr>
<td>
<input type="text" name="textfield">
</td>
<td>
<input type="checkbox" name="checkboxbutton" value="radiobutton">
</td>
</tr>
</table>
<p>
<input type="button" name="Button" value=" add " onClick="show('add');">
<input type="button" name="Button2" value=" delete " onClick="show('delete');">
<input type="button" name="Button3" value=" hide " onClick="show('hide');">
</p>
</body>
</html>
weidegong 2002-05-16
- 打赏
- 举报
1.增加:document.all.selectName.add(new Option(text,value),n)
其中text是option中显示部分内容
value是option中value的值
n是加入option项的位置,如果省略加到最后
2.删除:document.all.selectName.remove(n)
其中:n是要删除的option序号(第一个是0,第二个是1....)
其中text是option中显示部分内容
value是option中value的值
n是加入option项的位置,如果省略加到最后
2.删除:document.all.selectName.remove(n)
其中:n是要删除的option序号(第一个是0,第二个是1....)
北极海hein 2002-05-16
- 打赏
- 举报
TO:qiushuiwuhen(秋水无恨)
能说说insertAdjacentHTML()作用及其用法吗？说完分全给你。
能说说insertAdjacentHTML()作用及其用法吗？说完分全给你。
qiushuiwuhen 2002-05-16
- 打赏
- 举报
selecedIndex
==>
selectedIndex
<select id=t>
<option>hehe</option>
</select>
<input value=add onclick=t.options[t.length++].text=Date() type=button>
<input value=del onclick="t.remove(t.selectedIndex);t.selectedIndex=0" type=button>
==>
selectedIndex
<select id=t>
<option>hehe</option>
</select>
<input value=add onclick=t.options[t.length++].text=Date() type=button>
<input value=del onclick="t.remove(t.selectedIndex);t.selectedIndex=0" type=button>
qiushuiwuhen 2002-05-16
- 打赏
- 举报
<select id=t>
<option>hehe</option>
</select>
<input value=add onclick=t.options[t.length++].text="增加" type=button>
<input value=del onclick=t.remove(t.selecedIndex) type=button>
<option>hehe</option>
</select>
<input value=add onclick=t.options[t.length++].text="增加" type=button>
<input value=del onclick=t.remove(t.selecedIndex) type=button>
