jQuery下拉菜單顯示/隱藏div

Question

我真的不太瞭解javascript，但我正在嘗試使用下面的代碼，它運行良好。我遇到的問題是如果在「選擇」選項末尾添加「...」或「：」，代碼將不再有效。

http://jsfiddle.net/fj63g/58/

HTML：

<select id="dropDown"> 
    <option>Choose</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

腳本：

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function(){ 
$(this).find("option").each(function() 
{ 
$('#' + this.value).hide(); 
}); 
    $('#' + this.value).show(); 

}); 

任何幫助，非常感謝！謝謝！

Answer 1

試試這個：

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function() { 
    $('.drop-down-show-hide').hide()  
    $('#' + this.value).show(); 

}); 

Updated fiddle

OR

要解決你的代碼，只需添加value=""到Choose選項

<select id="dropDown"> 
    <option value="">Choose...</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 
<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

這裏是一個updated fiddle fixing your code

Answer 2

HTML：

<select id="dropDown"> 
    <option value="">Choose...</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

腳本：

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function(){ 
$(this).find("option").each(function() 
{ 
    if (this.value != '') 
    { 
     $('#' + this.value).hide(); 
    } 
}); 
$('#' + this.value).show(); 

}); 

發表卡思答案是更好的，但是這是這樣你就可以看到它是失敗。

最終，因爲您告訴它隱藏了一個不存在的項目，所以它在該行上打破了，而沒有顯示您的div。

的JavaScript試圖解決：

$('#' + undefined).hide(); 

這是不可能的，因此將拋出一個錯誤，而不是顯示你的div。

卡思的答案是最有效的，但你也可以通過給「選擇」選項提供一個值，然後在顯示/隱藏時檢查它來克服它。

Answer 3

使用它http://jsfiddle.net/fj63g/59/

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function() { 
    $('.drop-down-show-hide').hide(); 
    $('#' + this.value).show(); 
}); 

Answer 4

我建議出從這個小提琴嘗試這種 fiddle

HTML：

<select id="dropDown"> 
    <option value="">Choose...</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

JS：

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function(){ 
    $(this).find("option").each(function(){ 
     $("#" + $(this).val()).hide(); 
     console.log($(this)); 
    });  
    $("#" + $(this).val()).show(); 
}); 

它保留了jquery樣式的語法。

Answer 5

<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 

<script> 
function namedata(data) 
{ 
    if(data=='A') 
    { 
     $('#diva').css('display','block'); 
     $('#divb').css('display','none'); 
    } 
    else if(data=='B') 
    { 
     $('#divb').css('display','block'); 
     $('#diva').css('display','none'); 
    } 
} 
</script> 



<p><label>Choose Name</label> 
     <select name="name" onchange="return namedata(this.value);"> 
      <option>-Select-</option> 
      <option value="A">A</option> 
      <option value="B">B</option> 
     </select> 
     </p> 

    <div style="display:none;" id="diva">My Div A</div> 
    <div style="display:none;" id="divb">My Div B</div>