用JavaScript怎样动态生成<option>项？

Question

var s="<select style=\"width:80\" id=s1>";
s += "<option value=""></option>";
s += "<option value="Mr">MR</option>";
s += "<option value="Mrs">MRs</option>";
-----------
s += "</select>";
s1.outerHTML = s;

Answer 1

也可以用
oElement = document.createElement(sTag)
看下例:
<SCRIPT>
function fnCreate(){
    oData.innerHTML="";
    var oOption=oSel.options[oSel.selectedIndex];
    if(oOption.text.length>0){
    var aElement=document.createElement(oOption.text);
    eval("aElement." + oOption.value + "='" + oText.value + "'");
    if(oOption.text=="A"){
        aElement.href="javascript:alert('A link.')";
   }
   }
    oData.appendChild(aElement);
}
</SCRIPT>
<SELECT ID="oSel" onchange="fnCreate()">
<OPTION VALUE="innerText">A
<OPTION VALUE="value">&lt;INPUT TYPE="button"&gt;
</SELECT>
<INPUT TYPE="text" ID="oText" VALUE="Sample Text">
<SPAN ID="oData" ></SPAN>

Answer 2

<select name='TitleMain' onchange="if (this.value=='Other') this.options[this.options.length]=new Option('Hello','Hello');">
    <option value=''></option>
    <option value='Mr'>Mr</option>
    <option value='Mrs'>Mrs</option>
    <option value='Miss'>Miss</option>
    <option value='Ms'>Ms</option>
    <option value='Other'>Other</option>   
</select>

Answer 3

我是要在原有的<option>Other</option>上输入内容。
并在原有的<select>....</select>中动态的生成新输入的<option>项。

Answer 4

<select name='TitleMain' onchange="if(this.value=='Other') hasAdd()">
    <option value='Mr'>Mr</option>
    <option value='Mrs'>Mrs</option>
    <option value='Miss'>Miss</option>
    <option value='Ms'>Ms</option>
    <option value='Other'>Other</option>
</select><SCRIPT LANGUAGE=javascript>
<!--
function hasAdd(){
var strTemp=window.prompt("添加Option");
if(strTemp!=null)
addOption(strTemp);
}
function addOption(str){
var o=document.createElement("option");
o.text=str;
o.value=str;
document.all.TitleMain.add(o);
}
//-->
</SCRIPT>

Answer 5

ssm1226(雨中人) 你好，你的解决方法不错。
能不能不通输入JavaScript提示输入内容？而直接在<option>上输入？？
当然可以不是真正的在<option>上输入，比如在<input type=hidden>中？Thank you!

Answer 6

<script language="javascript">
//==================================================================
//relate check founction
//==================================================================
/*
Function Name:relListBoxOther
Description:Popup msg box
Parameter:
  strObjectName: control object name.
  intMaxLength:  value max length
Return:
        true: succeed.
        false:faild
*/
function relListBoxOther(strObjectName,intMaxLength)
{
var strObjName="document."+strObjectName.form.name+"."+strObjectName.name;
var objListBoxItem=document.createElement("OPTION");
var strObjSignName=strObjName + "_SIGN"; 
if(strObjectName.value=="Other")
{
objListBoxItem.text="";
objListBoxItem.value="";
strObjectName.add(objListBoxItem);
objListBoxItem.selected=true;
eval(strObjSignName).value=1;
return true;  
}
else
{
eval(strObjSignName).value=0;
}
}
function listBoxOther(strObjectName,intMaxLength)
{
var strObjName="document."+strObjectName.form.name+"."+strObjectName.name + "_SIGN";
if(eval(strObjName).value==1)
{
if(strObjectName.options[strObjectName.selectedIndex].text.length>=intMaxLength)
{
alert("The length of the value is too long.");
return false;
}
strObjectName.options[strObjectName.selectedIndex].text=strObjectName.options[strObjectName.selectedIndex].text+String.fromCharCode(window.event.keyCode);
strObjectName.options[strObjectName.selectedIndex].value=strObjectName.options[strObjectName.selectedIndex].text;
return true;
}
return false;
}
</script>
<form name="EnterApplicationForm" method="post">
Title:
<select name='TitleMain' onchange=relListBoxOther(this,20) onKeypress=listBoxOther(this,20);>
<option value='' selected></option>
<option value='Mr'>Mr</option>
<option value='Mrs'>Mrs</option>
<option value='Miss'>Miss</option>
<option value='Ms'>Ms</option>
<option value='Other'>Other</option>
</select>
<input type='hidden' name='TitleMain_OBJ' value=T_Application>
<input type='hidden' name='TitleMainATTR1_OBJ' value='5'>
<input type='hidden' name='TitleMainATTR2_OBJ' value=TitleMain>
<input type='hidden' name='TitleMain_PAGE_OBJ' size=2 value=1>
<input type='hidden' name='TitleMain_SIGN' value='0'>
</form>