クリックするとドロップダウンからdivベースの値を表示する方法は？

Question

「go-button」をクリックしたときに、ユーザーが選択した値に基づいていくつかの異なるdivを表示しようとしています。ここに私のスクリプトは次のとおりです。

$(document).ready(function(){ 
$('#divarea1').hide(); 
$('#divarea2').hide(); 
$('#divarea3').hide(); 

    $('#go-button').click(function() { 
    var whatToShow = $('#dropdown').val(); 
     if (whatToShow = ref1) { 
      $('#divarea1').show(); 
      } 
     else if (whatToShow = ref2) { 
      $('#divarea2').show(); 
      } 
     else { 
      $('#divarea3').show(); 
      } 
}); 
}); 

そして、ここでは私のhtmlです：

<form name="ref-selector" method="POST" ACTION="URL"> 
    <select id="dropdown" name="dropdown"> 
     <option value="ref1">Book</option> 
     <option value="ref2">Journal</option> 
     <option value="ref3">Webpage</option> 
    </select> 
    <input type="button" id="go-button" value="Go"> 
</form> 


<div id="divarea1"> 
<p>Some random content</p> 
</div> 

<div id="divarea2"> 
<p>Some other random content</p> 
</div> 

<div id="divarea3"> 
<p>The last random content</p> 
</div> 

私はあなたのいくつかは、私を助けることができることを願っています。私は解決策を見ようとしましたが、私が探しているものは何もないようですが、私が読んだこと以外は何もできません。

Answer 1

あなたのオプションの値として<div />のIDを指定することをお勧めします。これにより、if-elseはまったく使用されません。

<form name="ref-selector" method="POST" ACTION="URL"> 
    <select id="dropdown" name="dropdown"> 
     <option value="ref1">Book</option> 
     <option value="ref2">Journal</option> 
     <option value="ref3">Webpage</option> 
    </select> 
    <input type="button" id="go-button" value="Go"> 
</form> 


<div id="divarea-ref1"> 
<p>Some random content</p> 
</div> 

<div id="divarea-ref2"> 
<p>Some other random content</p> 
</div> 

<div id="divarea-ref3"> 
<p>The last random content</p> 
</div> 

をそして、このJavaScriptコードで、あなたはdivの任意の数がちょうど

$(document).ready(function() { 
    $('div[id^=divarea-]').hide(); 

    $('#go-button').click(function() { 
     var whatToShow = $('#dropdown').val(); 

     $('div[id^=divarea-]').hide(); 
     $('#divarea-' + whatToShow).show(); 
    }); 
});