Anzeige je nach gewählter Option ändern

Question

Ich möchte 2 verschiedene Div-Stile mit jQuery ändern. Während der Wert ist div1 wird div1 angezeigt. Und wenn der Wert div2 wird div2 angezeigt. Ich denke, ich kann es nicht mit "if/else" in jQuery tun.

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

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').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>

DEMONSTRATION

Answer 2

Dies wird automatisches Ausblenden alle nicht ausgewählten Optionen, während nur die ausgewählte Option angezeigt wird, wenn Sie mehr als zwei Optionen angeben müssen

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

Nur eine Randbemerkung: Bitte beachten Sie, dass Sie in Ihrem Code ein $ anstelle eines # in Ihrem Stilteil für div2
Die richtige wäre #div2 { anstelle von $div2 {