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/

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

1 个答案: