選択したオプションに応じて表示を変更します

Question

jQueryで2つの異なるdivスタイルを変更したいと思います。値は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> 

Answer 1

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

Answer 2

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

Answer 3

これを試してみてください：このjsFiddle同様

$(document).ready(){ 

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

} 

Answer 4

を？

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

Answer 5

これはトリックを行う必要があります。

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

DEMONSTRATION

Answer 7

これは自動的に隠す任意の非選択のオプションは、1つだけが表示されますする一方を選択した場合、n以上2つのオプション

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

ただ、サイドノートを置くために、EED：正しいで#div2 {だろうdiv2
のためにあなたのコードの中で、あなたのスタイルの一部に#の代わりに$を置くことに注意してください$div2 {