根据选择的选项更改显示 [英] Change display depending on option selected

问题描述

我想用jQuery更改2种不同的div样式.值为div1时，将显示div1.当值是div2时，将显示div2.我猜我无法在jQuery中使用"if/else"来做到这一点.

I want to change 2 different div styles with jQuery. While the value is div1, div1 will be shown. And when the value is div2, div2 will be shown. I guess I can't do it with "if/else" in jQuery.

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

推荐答案

这应该可以解决问题:

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

FIDDLE

这篇关于根据选择的选项更改显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！