Javascript用来自文本字段的输入替换“其他”值

Question

我正在处理以下表格...

当用户从单选组中选择一个选项时，会显示一个带有多选列表的 div。如果这些选择之一是“其他”，则会显示一个文本框，允许用户输入信息。

如何让表单返回多选列表中的选择，同时将“其他”值替换为文本输入字段的值？？

我花了无数小时搜索谷歌和这个网站，虽然我找到了一些类似的解决方案，但没有一个是用于多项选择的，也没有一个适合我的需求。

这是我目前所拥有的表格：

<form method="post" action="send_email.asp"  onsubmit="return Form_Validator (this)" 
  name="form2" id="form2" >
<tr>
<td>Product Type: <br />
<input name="ProductType" type="radio" value="Network" tabindex="1"
 onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','none');"/>
        Network<br />
<input name="ProductType" type="radio" value="Network and CPE" tabindex="2"
 onclick="setVisibility('NetworkProducts','inline'); setVisibility
('CPEProducts','inline');"/>
        Network and CPE<br />
<input name="ProductType" type="radio" value="CPE Only" tabindex="3" 
onclick="setVisibility('NetworkProducts','none'); setVisibility
('CPEProducts','inline');"/>
        CPE Only<br/>

<div id="NetworkProducts" align="left">
        Network Product Sold <span class="style2">*</span> 
        <select name="NetProductSold" size="3" multiple="MULTIPLE"
 id="NetProductSold" onchange="showothernet(this.form);">
            <option value="Prod1">Prod1</option>
            <option value="Prod2">Prod2</option>
            <option value="Prod3">Prod3</option>
            <option value="Prod4">Prod4</option>
            <option value="Prod5">Prod5</option>
            <option value="Prod6">Prod6</option>
            <option value="Prod7">Prod7</option>
            <option value="Prod8">Prod8</option>
            <option value="Prod9">Prod9</option>
            <option value="Prod10">Prod10</option>
            <option value="Other">Other</option>            
            </select> 


      </div>

      <blockquote>
      <div id="OtherNetworkProducts" align="left" >
        If other, Please specify: <input name="OtherNetProductSold"
 type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >
          </div>
          </blockquote>

      <div id="CPEProducts" align="left">
      CPE Product Sold <span class="style2">*</span> 
      <select name="CPEProductSold" size="3" multiple="multiple"
 id="CPEProductSold" onchange="showothernet(this.form);" >
        <option value="CPE1">CPE1</option>
        <option value="CPE2">CPE2</option>
        <option value="CPE3">CPE3</option>
        <option value="CPE4">CPE4</option>
        <option value="CPE5">CPE5</option>
        <option value="CPE6">CPE6</option>
        <option value="CPE7">CPE7</option>
        <option value="Other">Other</option>
      </select>


      </div>    
      <blockquote>
      <div id="OtherCPEProducts">
    If other, Please specify: <input name="OtherCPEProductSold" type="text"
id="OtherCPEProductSold" size="50" >

          </div>
      </blockquote> 
</form>

这就是我为 javascript 所拥有的：

<script Language="JavaScript"><!--


function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function showothernet (form) 
{
for (var j = 0; j < form.NetProductSold.length; j++) 
{
    if (form.NetProductSold.options[j].selected) 
    {
        if(form.NetProductSold.options[j].value == "Other") 
            {
            setVisibility('OtherNetworkProducts','inline');

            }
        else 
            {
            setVisibility('OtherNetworkProducts','none');
            }
    }

}

for (var i = 0; i < form.CPEProductSold.length; i++) 
{
    if (form.CPEProductSold.options[i].selected) 
    {
        if(form.CPEProductSold.options[i].value == "Other") 
        {
            setVisibility('OtherCPEProducts','inline');
        }
        else 
        {
            setVisibility('OtherCPEProducts','none');
        }
    }
}
}


function setFocus(form)
{
var process = form.OtherNetProductSold.value;
form.NetProductSold.options[10].value = process
alert (form.NetProductSold.options[10].value);
}
//--></script>

表单按我想要的方式运行，当用户单击“网络”或“网络和 CPE”并出现网络产品列表时，如果“其他”选项是所选选项之一，则文本显示其他字段。

问题是如何将多选中的“其他”值替换为文本字段中的输入。

请帮忙！

提前致谢！

Answer 1

向用户显示的文本介于 <option> 和 </option> 之间。因此，请将其设置为 .innerHTML（它会更改之间的文本）：

form.NetProductSold.options[10].innerHTML = process;

其次，你有：

<input name="OtherNetProductSold"
type="text" id="OtherNetProductSold" size="50" onblur="setFocus(this);" >

当您的setFocus 接受表单时。所以，setFocus(this.form) 你应该使用。

http://jsfiddle.net/pimvdb/nMkvb/