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

Damit sollte es klappen:

<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

Answer 2

$('select').val() gibt den Wert der ausgewählten Option zurück. Verwenden Sie also eine switch wie diese:

function displayVals() {
    switch ($("#divit").val()) {
        case 'div1':
            $("#div1").show();
            $("#div2").hide();
        break;
        case 'div2':
            $("#div1").hide();
            $("#div2").show();
        break;
    }
}

Demo: http://jsfiddle.net/TimWolla/2KaTK/

Answer 3

JQuery ist nur eine Javascript-Bibliothek. Sie verwenden immer noch Javascript-Code, um auf die jQuery-Bibliothek zuzugreifen, sodass Sie beliebige Javascript-Befehle verwenden können.

function displayVals() {
  var selected = $("#divit").val();
  if (selected == "div1") {
    $("#div1").hide();
    $("#div2").show();
  } else {
    $("#div1").show();
    $("#div2").hide();
  }
}
$("select").change(displayVals);
displayVals();

Answer 4

Versuchen Sie dies:

$(document).ready(){

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

}

Answer 5

Wie diese jsFiddle ?

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