Question

我需要使用标签创建一个表单，该表单将包含3个选项。选择选项1或2时，div 1应该是可见的，如果选择了选项3，则div2应该是可见的。我有在IE和Firefox中运行的脚本，但在Chrome和Safari中不起作用。

这是我的剧本：

<select name="selector">
    <option value="option1" onclick="document.getElementById('id_2').style.display = this.checked ? 'block' : 'none'; document.getElementById('id_1').style.display = this.checked ? 'none' : 'block';"> Option1
    </option>
    <option value="option2" onclick="document.getElementById('id_2').style.display = this.checked ? 'block' : 'none'; document.getElementById('id_1').style.display = this.checked ? 'none' : 'block';"> Option2
    </option>
    <option value="option3" onclick="document.getElementById('id_1').style.display = this.checked ? 'block' : 'none'; document.getElementById('id_2').style.display = this.checked ? 'none' : 'block';"> Option3
    </option>
</select>
<br>
<br>    
<div id="id_1" style="display: block">
    <span>Text1</span>
</div>  
<div id="id_2" style="display: none">
    <span>Text2</span>
</div>

Answer 1

查看此Post。

它基于选项元素链接到onclick事件。

在select元素上使用onchange事件。

Answer 2

问题是选项单击处理程序，而是使用更改处理程序

＆＃13;

function setDisplay(el) {
    var value = el.value;
    document.getElementById('id_1').style.display = value == 'option3' ? 'block' : 'none';
    document.getElementById('id_2').style.display = value == 'option1' || value == 'option2' ? 'block' : 'none';
}

＆＃13;

<select name="selector" onchange="setDisplay(this)">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
</select>
<br/>
<br/>
<div id="id_1" style="display: block"><span>Text1</span></div>
<div id="id_2" style="display: none"> <span>Text2</span></div>

＆＃13;

Answer 3

如果您可以更改div以添加某些类，则可以更简单地完成任务。

将options添加到需要检查选择值的所有div，并添加类似option1的特定类，以指示在选择option1时应显示该类。

当值改变时，获取所有观看div并使用他们的类来决定是否显示。

如果你这样做，你可以确保没有其他逻辑需要添加到javascript更多，每次option / div增加时，你只需要指定哪些div将监视哪些选项，脚本将执行其余的工作。

＆＃13;

// Use window.onload to make sure the target select is exist.
window.onload = function() {
  // Listen to select's change event.
  var select = document.getElementsByName('selector')[0];
  select.addEventListener('change', function() {
      // Get the select's value.
      var value = this.value;
      // Get all related divs that will be affected by the value change.
      var divs = document.getElementsByClassName('options');
      var i, len = divs.length, show;
      for (i = 0; i < len; ++i) {
          // If the div has the class just as selected value, show it, otherwise hide it.
          show = divs[i].classList.contains(value) ? 'block' : 'none';
          divs[i].style.display = show;
      }
  });
};

＆＃13;

<select name="selector">
    <option value="option1"> Option1</option>
    <option value="option2"> Option2</option>
    <option value="option3"> Option3</option>
</select>
<br>
<br>

<div id="id_1" class="options option1 option2" style="display: block">
  <span>Text1</span>
</div>

<div id="id_2" class="options option3" style="display: none">
  <span>Text2</span>
</div>

＆＃13;

Answer 4

<option>标记不应包含JavaScript onclick事件。您需要的是为<select>标记绑定的onchange事件。这应该有效：https://jsfiddle.net/q08ns6f8/

<select name="selector" onChange="jsFunction()">
    <option value="option1">Option1</option>
    <option value="option2">Option2</option>
    <option value="option3">Option3</option>
</select>
<div id="id_1" style="display: block;"> <span>Text1</span></div>
<div id="id_2" style="display: none;"> <span>Text2</span></div>
<script>
    function jsFunction() {
        var isOption3 = $("select option:selected").val() == 'option3';
        document.getElementById('id_1').style.display = isOption3 ? 'none' : 'block';
        document.getElementById('id_2').style.display = isOption3 ? 'block' : 'none';
    }
</script>

Answer 5

尝试将onchange与select标记一起使用，同时尝试使用this.selectedIndex代替this.checked：

var byId = function(id) {
  return document.getElementById(id);
};
var toggle = function(el, flag) {
  el.style.display = flag ? 'block' : 'none';
};
var changed = function(dd) {
  var i = dd.selectedIndex;
  toggle(byId('id_1'), 2 === i); //option 3
  toggle(byId('id_2'), (1 === i || 0 === i)); //option 1 or 2
};
changed(byId('dd')); // set on page load

<select onchange="changed(this)" id='dd'>
  <option value="option1">Option1</option>
  <option value="option2">Option2</option>
  <option value="option3">Option3</option>
</select>
<br/>
<div id="id_1"><span>Text1</span></div>
<div id="id_2"><span>Text2</span></div>

根据表单中选择的选项显示或隐藏不同的div

5 个答案: