如何显示/隐藏下拉更改字段

How to show/hide a field on dropdown change?

本文关键字：字段 隐藏 何显示 显示      更新时间：2023-09-26

我搜索了Stackoverflow，发现了很多答案，我如何通过jQuery或简单的内联js显示/隐藏下拉框更改的字段。但是我的问题是在表中使用它。

首先，让我们保持简单，使用内联简单js而不是jQuery。我想如果recaptcha被选择，那么私钥和公钥字段将是可见的。我使用一个表，所以整行都应该被隐藏。其余的形式应该成为上层，立即在选择菜单下，如果这些字段应该隐藏，以避免行之间的差距在表。但它对row不起作用。并且只有第二个字段将是in/invisible，因为我在field而不是tr上添加了样式(只是为了测试第一个字段，我在tr上使用了它，而在第二个字段中使用了它，看看会发生什么，但只有第二个字段有效。)如何设置它的工作行删除和形式的其余部分将是上部，以避免在形式的两个空白行?关于如何使用jQuery而不是内联简单js来修复它的答案也很受欢迎，因为我的最终目标是使用jQuery。

<tr class="something1">
<td class="left">Activate Captcha: </td>
<td class="right"><select name="activate_captcha" onchange="if (this.value=='recaptcha'){this.form['recaptcha'].style.visibility='visible'}else{this.form['recaptcha'].style.visibility='hidden'};">
<option value="none">None</option>
<option value="recaptcha">ReCaptcha</option>
</select>
</td>
</tr>
<tr class="something1" id="recaptcha" style="visibility:hidden;">
<td class="left">ReCaptcha Public Key: </td>
<td class="right"><input type="text" size="40" name="pub_key" value="" /></td>
</tr>
<tr class="something1">
<td class="left">ReCaptcha Private Key: </td>
<td class="right"><input type="text" id="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" /></td>
</tr>
</tr>
<tr class="something1">
<td class="left">This row should come up under dropdown if rows above are invisible: </td>
<td class="right"><input type="text" value="" /></td>
</tr>

id必须是唯一的，所以您不能有多个id="recaptcha"。修改为class="recaptcha"

然后改变

this.form['recaptcha'].style.visibility = 'hidden';

: 

recaptcha = this.form.getElementsByClassName('recaptcha');
for (i = 0; i < recaptcha.length; i++) {
    recaptcha[i].style.visibility = 'hidden';
}

在jQuery中变成:

$(this.form).find('.recaptcha').css('visibility', 'hidden');

完整的代码可以是:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table>
    <tr class="something1">
      <td class="left">Activate Captcha:</td>
      <td class="right">
        <select name="activate_captcha" onchange="$(this.form).find('.recaptcha').css('visibility', this.value=='recaptcha' ? 'visible' : 'hidden');">
          <option value="none">None</option>
          <option value="recaptcha">ReCaptcha</option>
        </select>
      </td>
    </tr>
    <tr class="something1 recaptcha" style="visibility:hidden;">
      <td class="left">ReCaptcha Public Key:</td>
      <td class="right">
        <input type="text" size="40" name="pub_key" value="" />
      </td>
    </tr>
    <tr class="something1">
      <td class="left">ReCaptcha Private Key:</td>
      <td class="right">
        <input type="text" class="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" />
      </td>
    </tr>
    </tr>
    <tr class="something1">
      <td class="left">This row should come up under dropdown if rows above are invisible:</td>
      <td class="right">
        <input type="text" value="" />
      </td>
    </tr>
  </table>
</form>

你没有任何形式的名称recaptcha，所以你不能真正使用this.form['recaptcha']，然而，因为你有id，你可以使用document.getElementById函数来获得特定的元素，从那里你的代码是相同的。

检查:

<table>
<tr class="something1">
<td class="left">Activate Captcha: </td>
<td class="right"><select name="activate_captcha" onchange="if (this.value=='recaptcha'){document.getElementById('recaptcha').style.visibility='visible'}else{document.getElementById('recaptcha').style.visibility='hidden'};">
<option value="none">None</option>
<option value="recaptcha">ReCaptcha</option>
</select>
</td>
</tr>
<tr class="something1" id="recaptcha" style="visibility:hidden;">
<td class="left">ReCaptcha Public Key: </td>
<td class="right"><input type="text" size="40" name="pub_key" value="" /></td>
</tr>
<tr class="something1">
<td class="left">ReCaptcha Private Key: </td>
<td class="right"><input type="text" id="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" /></td>
</tr>
<tr class="something1">
<td class="left">This row should come up under dropdown if rows above are invisible: </td>
<td class="right"><input type="text" value="" /></td>
</tr>
</table>

我更喜欢在运行时添加代码，而不是内联添加代码。

我将可见改为显示，因为您要求删除空行。

我的建议是:

// Polyfill for Internet Explorer 8
if(!("nextElementSibling" in document.documentElement)){
  Object.defineProperty(Element.prototype, "nextElementSibling", {
    get: function(){
      var e = this.nextSibling;
      while(e && 1 !== e.nodeType)
        e = e.nextSibling;
      return e;
    }
  });
}
window.addEventListener('DOMContentLoaded', function (e) {
  [].forEach.call(document.querySelectorAll('tr.something1 select'), function (element, index) {
    element.addEventListener('change', function (e) {
      if (this.value == 'recaptcha') {
        this.closest('tr').nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.nextElementSibling.style.display = 'block';
      } else {
        this.closest('tr').nextElementSibling.style.display = 'none';
        this.closest('tr').nextElementSibling.nextElementSibling.style.display = 'block';
        this.closest('tr').nextElementSibling.nextElementSibling.nextElementSibling.style.display = 'block';
      }
    })
  });
});
<table>
    <tbody>
    <tr class="something1">
        <td class="left">Activate Captcha:</td>
        <td class="right"><select name="activate_captcha">
            <option value="none">None</option>
            <option value="recaptcha">ReCaptcha</option>
        </select>
        </td>
    </tr>
    <tr class="something1" style="display:none;">
        <td class="left">ReCaptcha Public Key:</td>
        <td class="right"><input type="text" size="40" name="pub_key" value=""/></td>
    </tr>
    <tr class="something1"  style="display:block;">
        <td class="left">ReCaptcha Private Key:</td>
        <td class="right"><input type="text" id="recaptcha" size="40" name="priv_key"
                                 value=""/></td>
    </tr>
    </tr>
    <tr class="something1"  style="display:block;">
        <td class="left">This row should come up under dropdown if rows above are invisible:</td>
        <td class="right"><input type="text" value=""/></td>
    </tr>
    </tbody>
</table>

相关文章：