根据所选的选项更改显示
我想用jQuery改变2种不同的div样式。 值为div1
,将显示div1。 当值为div2
,将显示div2。 我想我不能用jQuery中的“if / else”来做。
#div1 { display: block; background-color: red; height:300px; width:300px;} $div2 { display: none; background-color: blue; height:300px; width:300px;} div1 div2 function displayVals() { var divoneValues = $("#divit").val("div1"); var divtwoValues = $("#divit").val("div2"); $("#div1").css("display", "none"); $("#div2").css("display", "block"); } $("select").change(displayVals); displayVals();
这应该是诀窍:
小提琴
$('select').val()
返回所选选项的值。 所以使用这样的switch
:
function displayVals() { switch ($("#divit").val()) { case 'div1': $("#div1").show(); $("#div2").hide(); break; case 'div2': $("#div1").hide(); $("#div2").show(); break; } }
演示: http : //jsfiddle.net/TimWolla/2KaTK/
jQuery只是一个Javascript库。 您仍然使用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();
试试这个:
$(document).ready(){ $(#divit).change(function(){ if($(this).val() == 'div1'){ $('#div2').hide(); $('#div1').show(); }else{ $('#div1').hide(); $('#div2').show(); } }); }
喜欢这个jsFiddle ?
$('#divit').change(function(){ $('div').hide(); $('#'+$(this).val()).show(); });
示范
如果您需要放置两个以上的选项,这将自动隐藏任何未选择的选项,同时仅显示所选的一个选项
请注意:请注意,在您的代码中,您在div2
样式部分中添加了$
代替#
正确的是#div2 {
代替$div2 {