jQuery根据选项选择显示/隐藏Div

Question

我正在尝试根据选择框选择的项目更改div

这是我的JSFiddle

这里我有以下代码

<select id="test" name="form_select">
   <option value="0" selected>No</option>
   <option value ="1">One</option>
   <option value ="2">Two</option>
   <option value ="3">Three</option>
</select>

<div id="first" style="display: none;">First Div</div>
<div id="second" style="display: none;">Second Div</div>
<div id="third" style="display: none;">Third Div</div>
<div id="none" style="display: none;">Nothing to Displayt</div>

和JS到

document.getElementById('test').addEventListener('change', function ()
{
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('none').style.display = style;
}
};

我需要的是显示根据选择的内容。 写入事件未触发...我在做什么错误，我该如何解决？

Answer 1

您的代码中有语法错误...然后

 var testel = document.getElementById('test'); testel.addEventListener('change', function() { testChange(this.value) }); //initialize testChange(testel.value) function testChange(value) { document.getElementById('none').style.display = value == 0 ? 'block' : 'none';; document.getElementById('first').style.display = value == 1 ? 'block' : 'none';; document.getElementById('second').style.display = value == 2 ? 'block' : 'none';; document.getElementById('third').style.display = value == 3 ? 'block' : 'none';; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select id="test" name="form_select"> <option value="0" selected>No</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <div id="first" style="display: none;">First Div</div> <div id="second" style="display: none;">Second Div</div> <div id="third" style="display: none;">Third Div</div> <div id="none" style="display: none;">Nothing to Displayt</div> 

Answer 2

js代码中有一个小语法错误。 请找到此更新的小提琴 。

JS代码-

document.getElementById（'test'）。addEventListener（'change'，function（）{
var style = this.value == 1吗？ 'block'：'none';
document.getElementById（'none'）。style.display = style;
样式= this.value == 1？ 'block'：'none';

 document.getElementById('first').style.display = style; style = this.value == 2 ? 'block' : 'none'; document.getElementById('second').style.display = style; style = this.value == 3 ? 'block' : 'none'; document.getElementById('third').style.display = style; }); 

Answer 3

您没有在开始后放置开始和关闭花括号，并且已经编写了

 document.getElementById('first').style.display = style;

两次，第一次不应该

更新代码：

document.getElementById('test').addEventListener('change', function (){ 
   {
      var style = this.value == 0 ? 'block' : 'none';
      document.getElementById('none').style.display = style;
   }
   {
      var style = this.value == 1 ? 'block' : 'none';
      document.getElementById('first').style.display = style;
   }
   { 
      var style = this.value == 2 ? 'block' : 'none';
      document.getElementById('second').style.display = style;
   }
   {
      var style = this.value == 3 ? 'block' : 'none';
      document.getElementById('third').style.display = style;
   }
});

更新JsFiddle

Answer 4

这就是我的方法： http : //jsfiddle.net/h7zb705q/10/

var mapping = {
    0: 'none',
    1: 'first',
    2: 'second',
    3: 'third'
};

var allItems = document.querySelectorAll('div');

document.getElementById('test').addEventListener('change', function () {
     var toShow = mapping[this.value];

     for(var i = 0; i < allItems.length; i++) {
        allItems[i].style.display = 'none';
     };

     document.getElementById(toShow).style.display = 'block';
});

Answer 5

用这样的东西

$('.statecontent').hide();
$('#myselector').change(function() {
    $('.statecontent').hide();
    $('.' + $(this).val()).show();    
});

<div class="statecontent state1">State1 Specific Page Content Goes here</div><br />
<div class="statecontent state2">State2 Specific Page Content Goes here</div><br />
<div class="statecontent state3">State3 Specific Page Content Goes here</div><br />

 <select id="myselector">
 <option value="state1">1</option>
 <option value="state2">2</option>
  <option value="state3">3</option>
 </select>

这是小提琴

Answer 6

这与使用jquery相同

http://jsfiddle.net/h9h5858L/1/