Question

有：

<label for="option">Option: 
  <select name="option" required>
    <option value="Yes">Yes</option>
    <option value="No" selected>No</option>
  </select>
</label>

<label for="mytext">Text:
  <input name="mytext" type="text">
</label>

如何解决：

OPTION为NO，则MYTEXT需要隐藏（包含标签）;
当OPTION为YES时，MYTEXT必须是可见的（包含标签）;

加载页面MYTEXT时需要隐藏（包含标签）。

非常感谢。

Answer 1

只需使用事件监听器：

＆＃13;

document.addEventListener('DOMContentLoaded', function() { // runs after all elements are loaded

  // element selectors:
  var mytextLabel = document.querySelector('label[for=mytext]');
  var option = document.querySelector('select[name=option]');
  var mytextInput = mytextLabel.querySelector('input');

  mytextLabel.classList.add('hidden'); // hides 'mytext' after page load

  option.addEventListener('change', function(event) { // runs after option is selected
    // the actual logic is pretty straightforward:
    if (event.target.value === 'Yes') {
      mytextLabel.classList.remove('hidden'); // shows the label with input inside
      mytextInput.required = true; // marks the input as required
    } else {
      mytextLabel.classList.add('hidden'); // hides the label with input inside
      mytextInput.required = false; // marks the input as optional
    }
  });
});

＆＃13;

.hidden {display: none;}

＆＃13;

<form onsubmit="alert('sent'); return false;">
<label for="option">Option: 
  <select name="option" required>
    <option value="Yes">Yes</option>
    <option value="No" selected>No</option>
  </select>
</label>

<label for="mytext">Text:
  <input name="mytext" type="text" />
</label>
<button type="submit">Send</button>
</form>

＆＃13;

编辑：添加了required属性

的切换

编辑：使用@ScottMarcus建议的CSS类（在大多数情况下，您可能不想覆盖display: hidden，但它仍然比内联样式更好）

Answer 2

您只需要设置一个CSS类来设置要隐藏的元素，并且如果您希望从开头隐藏它，则默认情况下将该类应用于该元素。然后，通过change上的select事件处理程序，您可以使用.classList对象的.toggle()方法切换该类的使用：

＆＃13;

var input = document.querySelector("[name='mytext']");
document.querySelector("select[name='option']").addEventListener("change", function(){
  input.classList.toggle("hidden");
});

＆＃13;

.hidden {  display:none; } /* This is appled to the input by default and toggled as needed */

＆＃13;

<label for="option">Option: 
  <select name="option" required>
    <option value="Yes">Yes</option>
    <option value="No" selected>No</option>
  </select>
</label>

<label for="mytext">Text:
  <input name="mytext" type="text" class="hidden">
</label>

＆＃13;

如何隐藏/隐藏选择到表单的值上的标签

2 个答案: