Question

这可能是一个非常愚蠢的问题，但我不熟悉JavaScript。

我有两个不同的下拉菜单。如果你选择＆＃34;其他＆＃34;选项，会出现一个文本框来写您的请求。

当我为第一个菜单编码时，它有效。当我编写第二个菜单时，只有第二个菜单可用，禁用第一个菜单的显示/隐藏功能。

＆＃13;

  function showfield(name){
    if(name=='Other')document.getElementById('div1').style.display="block";
    else document.getElementById('div1').style.display="none";
  }
 
 function hidefield() {
 document.getElementById('div1').style.display='none';
 }

 function showfield(name){
    if(name=='Other')document.getElementById('div2').style.display="block";
    else document.getElementById('div2').style.display="none";
  }
 
 function hidefield() {
 document.getElementById('div2').style.display='none';
 }

＆＃13;

 <body onload="hidefield()">
   <table>
     <tbody>
           <tr>
                        <td>
                        <select onchange="showfield(this.options[this.selectedIndex].value)">
                        <option value=" ">-- Please select --</option>
                        <option value="All">All</option>
                        <option value="Clipped">Clipped</option>
                        <option value="Per Post-It">Per Post-It</option>
                        <option value="Other">Other</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>
                        <div id="div1">Other: <input type="text" name="other" /></div>
                        </td>
                    </tr>
        <tr>
                        <td>
                        <select onchange="showfield(this.options[this.selectedIndex].value)">
                        <option value=" ">-- Please select --</option>
                        <option value="Binding Element">Binding Element</option>
                        <option value="Folder/Binder">Folder/Binder</option>
                        <option value="Tabs">Tabs</option>
                        <option value="Other">Other</option>
                        </select></td>
                    </tr>
                    <tr>
                        <td>
                        <div id="div2">Other: <input type="text" name="other" /></div>
                        </td>
                    </tr>
       </tbody>
     </table>
   </body>

＆＃13;

Answer 1

当您声明变量（或函数）时，每个名称只能有一个函数。否则，定义的最后一个将覆盖其他的。在您的情况下，我要么更改第二组的名称，要么更改showField和hideField以获取另一个参数：id。对于第一个，通过"other1"，对于第二个，通过"other2"。您还应该将other字段重命名为不同的名称。

Answer 2

有4种不同的功能似乎有点不必要（而且非法 - 功能不能有重复的名称）。您可以编写一个方法来处理隐藏和显示任何对象：

function showObject (obj) {
    obj.style.display = "";
}

function hideObject (obj) {
    obj.style.display = "none";
}

然后，从对象调用方法时，您可以执行以下操作：＆lt; ... onchange="showfield(document.getElementById(this.options[this.selectedIndex].value));" .../>

当然， jQuery 粉丝的解决方案：

function showObject (id) {
    $("#" + id).show();
}

function hideObject (id) {
    $("#" + id).hide();
}

在这种情况下，元素的名称将被传递，而不是元素本身： onchange="showfield(this.options[this.selectedIndex].value)" .../>

Answer 3

首先，你确实两次声明了函数hidefield，函数名必须是唯一的，所以第二个函数应该有另一个名字。
第二件事是你没有显示div1的功能，因为你的showfunction只选择div div2

Answer 4

感谢您的帮助！

我将函数名称更改为唯一，并在body标记的onload事件中添加了不同的函数。

＆＃13;

function showfield(name) {
  if (name == 'Other') document.getElementById('div1').style.display = "block";
  else document.getElementById('div1').style.display = "none";
}

function hidefield() {
  document.getElementById('div1').style.display = 'none';
}

function showBreak(name) {
  if (name == 'Other') document.getElementById('div2').style.display = "block";
  else document.getElementById('div2').style.display = "none";
}

function hideBreak() {
  document.getElementById('div2').style.display = 'none';
}

＆＃13;

<html>
    <head>
        <title>Job Ticket</title>
        
    </head>
    <body onload="hidefield(); showBreak();">
        <table class="webform" cellspacing="0" cellpadding="2" border="0">
            <tbody>
                <tr>
                    <td>
                    <p>Copying/Scanning</p>
                    </td>
                </tr>
                <tr>
                    <td>
                    <select onchange="showfield(this.options[this.selectedIndex].value)">
                    <option value=" ">-- Please select --</option>
                    <option value="All">All</option>
                    <option value="Clipped">Clipped</option>
                    <option value="Per Post-It">Per Post-It</option>
                    <option value="Other">Other</option>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    <div id="div1">Other:
                    <input type="text" name="whatever" />
                    </div>
                    </td>
                </tr>
                <tr>
                    <td>
                    <p>Document Breaks</p>
                    </td>
                </tr>
                <tr>
                    <td>
                    <select onchange="showBreak(this.options[this.selectedIndex].value)">
                    <option value=" ">-- Please select --</option>
                    <option value="All">All</option>
                    <option value="Clipped">Clipped</option>
                    <option value="Per Post-It">Per Post-It</option>
                    <option value="Other">Other</option>
                    </select>
                    </td>
                </tr>
                <tr>
                    <td>
                    <div id="div2">Other:
                    <input type="text" name="whatever" />
                    </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

＆＃13;

显示/隐藏功能

4 个答案: