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>