[英]Change display depending on option selected
I want to change 2 different div styles with jQuery. 我想用jQuery改变2种不同的div样式。 While the value is div1
, div1 will be shown. 值为div1
,将显示div1。 And when the value is div2
, div2 will be shown. 当值为div2
,将显示div2。 I guess I can't do it with "if/else" in jQuery. 我想我不能用jQuery中的“if / else”来做。
<style>
#div1 { display: block; background-color: red; height:300px; width:300px;}
$div2 { display: none; background-color: blue; height:300px; width:300px;}
</style>
<select id="divit">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<script>
function displayVals() {
var divoneValues = $("#divit").val("div1");
var divtwoValues = $("#divit").val("div2");
$("#div1").css("display", "none");
$("#div2").css("display", "block");
}
$("select").change(displayVals);
displayVals();
</script>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
This should do the trick: 这应该做的伎俩:
<style>
#div1 { display: block; background-color: red; height:300px; width:300px;}
#div2 { display: none; background-color: blue; height:300px; width:300px;}
</style>
<select id="divit">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<script>
$("#divit").on('change', function() {
var sel = $("select").val();
if (sel=='div1') {
$("#div1").css("display", "block");
$("#div2").css("display", "none");
}else if (sel=='div2') {
$("#div1").css("display", "none");
$("#div2").css("display", "block");
}
});
</script>
<div id="div1"></div>
<div id="div2"></div>
$('select').val()
returns the value of the selected option. $('select').val()
返回所选选项的值。 So use a switch
like this: 所以使用这样的switch
:
function displayVals() {
switch ($("#divit").val()) {
case 'div1':
$("#div1").show();
$("#div2").hide();
break;
case 'div2':
$("#div1").hide();
$("#div2").show();
break;
}
}
Demo: http://jsfiddle.net/TimWolla/2KaTK/ 演示: http : //jsfiddle.net/TimWolla/2KaTK/
jQuery is just a Javascript library. jQuery只是一个Javascript库。 You still use Javascript code to access the jQuery library, so you can use any Javascript commands. 您仍然使用Javascript代码来访问jQuery库,因此您可以使用任何Javascript命令。
function displayVals() {
var selected = $("#divit").val();
if (selected == "div1") {
$("#div1").hide();
$("#div2").show();
} else {
$("#div1").show();
$("#div2").hide();
}
}
$("select").change(displayVals);
displayVals();
Try this: 尝试这个:
$(document).ready(){
$(#divit).change(function(){
if($(this).val() == 'div1'){
$('#div2').hide();
$('#div1').show();
}else{
$('#div1').hide();
$('#div2').show();
}
});
}
<style>
#div1 { display: block; background-color: red; height:300px; width:300px;}
#div2 { display: none; background-color: blue; height:300px; width:300px;}
</style>
<select id="divit">
<option value="div1">div1</option>
<option value="div2">div2</option>
</select>
<script>
$('#divit').change(function(){
hideotherdivs($(this).val());
});
function hideotherdivs(div_not_to_hide)
{
$('#div1').hide();
$('#div2').hide();
//add all divs that have to be included in this scheme of hiding and showing
$(eval(div_not_to_hide)).show();
}
</script>
<div id="div1"></div>
<div id="div2"></div>
This will auto hide any non selected options, while will show only the one selected, if you need to put more then two options 如果您需要放置两个以上的选项,这将自动隐藏任何未选择的选项,同时仅显示所选的一个选项
<style>
#div1 { position: absolute; display: block; background-color: red; height:300px; width:300px;}
#div2 { position: absolute; display: none; background-color: blue; height:300px; width:300px;}
#div3 { position: absolute; display: none; background-color: green; height:300px; width:300px;}
#div4 { position: absolute; display: none; background-color: pink; height:300px; width:300px;}
#div5 { position: absolute; display: none; background-color: aqua; height:300px; width:300px;}
</style>
<select id="divit">
<option value="div1">div1</option>
<option value="div2">div2</option>
<option value="div3">div3</option>
<option value="div4">div4</option>
<option value="div5">div5</option>
</select>
<script>
function displayVals()
{
$('select#divit > option').each(function()
{
if ($(this).val() == $('select#divit').val())
{
$('#'+$(this).val()).css('display', 'block');
}
else
{
$('#'+$(this).val()).css('display', 'none');
}
});
}
$("select").change(displayVals);
displayVals();
</script>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
Just a side note: please note that in your code you put a $
in place of a #
in your style part for div2
请注意:请注意,在您的代码中,您在div2
样式部分中添加了$
代替#
The correct would be #div2 {
in place of $div2 {
正确的是#div2 {
代替$div2 {
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.