[英]jQuery Show / Hide Div According to Option Select
I am trying to change the div according to the select box selectged item 我正在尝试根据选择框选择的项目更改div
Here is my JSFiddle 这是我的JSFiddle
Here i have the following code 这里我有以下代码
<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>
And the JS To 和JS到
document.getElementById('test').addEventListener('change', function ()
{
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('none').style.display = style;
}
};
What i need is to display the Respective According to the Selection. 我需要的是显示根据选择的内容。 The Event is wrote is not triggering... What is the mistake i am doing and how can i fix this ? 写入事件未触发...我在做什么错误,我该如何解决?
You have syntactical errors in your code... then 您的代码中有语法错误...然后
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>
There was a minor syntactical error in the js code. js代码中有一个小语法错误。 Please find this updated fiddle . 请找到此更新的小提琴 。
JS Code - JS代码-
document.getElementById('test').addEventListener('change', function () { document.getElementById('test')。addEventListener('change',function(){
var style = this.value == 1 ? var style = this.value == 1吗? 'block' : 'none'; 'block':'none';
document.getElementById('none').style.display =style; document.getElementById('none')。style.display = style;
style = this.value == 1 ? 样式= this.value == 1? 'block' : 'none'; '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; });
You have not put start and close curly braces after starting and you have written 您没有在开始后放置开始和关闭花括号,并且已经编写了
document.getElementById('first').style.display = style;
two times, first time it should be none 两次,第一次不应该
Update Code: 更新代码:
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;
}
});
This is how I would do it: http://jsfiddle.net/h7zb705q/10/ 这就是我的方法: 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';
});
Use some thing like this 用这样的东西
$('.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>
here is the same using jquery
这与使用jquery
相同
http://jsfiddle.net/h9h5858L/1/ http://jsfiddle.net/h9h5858L/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.