根据所选选项更改显示内容。

Question

我想用jQuery更改2个不同

的样式。当值为 div1 时，将显示div1。当值为 div2 时，将显示div2。我猜我不能在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>

- user1162833

Answer 1

这应该能解决问题：

<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>

代码片段

- adeneo

---

非常感谢。它运行得非常好。你拯救了世界上的一个人 :) - user1162833

Answer 2

$('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/

- TimWolla

Answer 3

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();

- Guffa

Answer 4

试试这个：

$(document).ready(){

    $(#divit).change(function(){
        if($(this).val() == 'div1'){
            $('#div2').hide();
            $('#div1').show();
        }else{
            $('#div1').hide();
            $('#div2').show();
        }
    });

}

- Sagar Patil

Answer 5

你喜欢这样的 jsFiddle吗？

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

- j08691

Answer 6

<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>

演示

- Robin Rizvi

Answer 7

这将会自动隐藏任何未被选中的选项，并且仅显示已选择的选项，如果你需要放置超过两个选项

<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>

仅供参考：请注意，在您的代码中，您在div2的样式部分中放置了一个$而不是#
正确的应该是#div2 {而不是$div2 {

- Luca Borrione

---

哦，是的，我刚看到了。也许是这个 bug 让我生病了，因为我尝试了更多的评论。谢谢 :) - user1162833

@user1162833，那就请投我一票吧 :) .. 还要检查正确答案哦。 - Luca Borrione