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

});

更新的小提琴

或者

要修复您的代码，只需添加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>

这是修复您的代码的更新小提琴