Question

我真的不太了解javascript，但我正在尝试使用以下代码，该代码运行良好。我遇到的问题是，如果我在“选择”选项的末尾添加“...”或“：”，则代码将不再有效。

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

});

karth发布的答案更好，但是你可以看到它失败了。

归根结底，因为你告诉它要隐藏一个不存在的项目，它就是在那条线上打破并且没有显示你的div。

javascript试图解决：

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

它不能，因此会抛出错误，而不是显示你的div。

Karth的回答是最有效的，但您也可以通过为“选择”选项提供一个值然后在显示/隐藏时检查它来克服它，如上所示。

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>

jQuery下拉显示/隐藏div

5 个答案: