根据所选的选项更改显示

我想用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 {