使用jQuery和选择框显示/隐藏Div

Question

使用jQuery和选择框显示/隐藏Div

3

我刚接触jQuery，正试图制作一个表单，根据用户从下拉选择框中选择的选项来显示和隐藏选项。我在这里搜索过，但仍未找到适合我的解决方案。我找到了一个教程，基本上实现了我的需求，但似乎只适用于选择框。非常感谢您的帮助。

这是我正在使用的HTML代码。

$(document).ready(function(){
    $("#emeorg").change(function(){
    switch($(this).val()){
        case "add":
            $("#test1").slideDown("slow");
            $("#changebox select:not(#emeorg, #test1)").slideUp("slow");
        break;
        case "edit":
            $("#test2").slideDown("slow");
            $("#changebox select:not(#emeorg, #edithidden)").slideUp("slow");
        break;
        case "remove":
            $("#test3").slideDown("slow");
            $("#changebox select:not(#emeorg, #removehidden)").slideUp("slow");
        break;
    }
});
});

这是我使用的HTML代码。

<div id="changebox">
<fieldset>
<legend><strong>Emergency Organization Information</strong></legend>
<div id="prompt">Select Action:</div><div id="answer"><select id="emeorg" name="emeorg">
        <option value="add">Add New Org</option>
        <option value="edit">Edit Existing Org</option>
        <option value="remove">Remove Existing Org</option>
        </select></div>
<div id="edithidden" style="display:none;">
<div id="prompt">Section to Edit:</div>
<div id="answer">
<select id="test2">
    <option>Section to Edit</option>
</select>
</div>
</div>
<div id="removehidden">
<div id="prompt">Section to Remove</div>
<div id="answer">
<select id="test3">
    <option>Section to Remove</option>
</select>
</div>
</div>
<div id="prompt">Organization Name:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Organization Phone Number:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Orginization Location:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="test3"><div id="prompt">Orginization Location Remove:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div></div>
<div id="prompt"><input type="submit" id="maininfoupdate" value="Update Information" /></div>
</fieldset>
</div>

我就是想不明白为什么这些 div 不会显示。我测试了只有一个内联样式的 edithidden，设置为 display:none;。它没有任何效果，但是 removehidden 在短暂地显示选择框后又滑回去了。

你有什么想法吗？

提前感谢。

编辑：

修订后的 jQuery 代码：

$(document).ready(function(){
$("#emeorg").change(function(){
    switch($(this).val()){
        case "add":
            $("#changebox select:not(#emeorg, #test1)").slideUp("slow");
        break;
        case "edit":
            $("#edithidden").slideDown("slow");
            $("#changebox select:not(#emeorg, #edithidden)").slideUp("slow");
        break;
        case "remove":
            $("#removehidden").slideDown("slow");
            $("#changebox select:not(#emeorg, #removehidden)").slideUp("slow");
        break;
    }
});
});

经过修订的HTML代码：

<div id="changebox">
<fieldset>
<legend><strong>Emergency Organization Information</strong></legend>
<div id="prompt">Select Action:</div><div id="answer"><select id="emeorg" name="emeorg">
        <option value="add">Add New Org</option>
        <option value="edit">Edit Existing Org</option>
        <option value="remove">Remove Existing Org</option>
        </select></div>
<div id="edithidden" style="display:none;">
<div id="prompt">Section to Edit:</div>
<div id="answer">
<select id="editcontent">
    <option>Section to Edit</option>
</select>
</div>
</div>
<div id="removehidden" style="display:none;">
<div id="prompt">Section to Remove</div>
<div id="answer">
<select id="removecontent">
    <option>Section to Remove</option>
</select>
</div>
</div>
<div id="prompt">Organization Name:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Organization Phone Number:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt">Orginization Location:</div><div id="answer"><input type="text" name="companyname" id="companyname" /></div>
<div id="prompt"><input type="submit" id="maininfoupdate" value="Update Information" /></div>
</fieldset>
</div>

现在当我选择编辑时，edithidden部分会下滑，但没有选择框出现。当我把它改回添加时，它并没有隐藏edit下滑的垃圾。至少我猜进展正在被取得。迄今为止，感谢您的所有帮助。

- PHaeLiX

1

我看到两个 id="test3" 的元素，这并不是真正的非法，但它会防止通过 jQuery 选择器选择元素。哦，现在我看到你有一个大问题。请确保每个 id 在页面中只出现一次。 - devnull69

我刚刚注意到id="test2"和id="test3"仍然存在，它们已被更改为分别反映"#edithidden"和"removehidden"。 - PHaeLiX

请展示您最近的标记，删除所有重复的id属性。 - devnull69

<div id="edithidden" style="display:none;"> <div id="prompt">编辑部分：</div> <div id="answer"> <select id="editcontent"> <option>选择要编辑的部分</option> </select> </div> </div> <div id="removehidden"> <div id="prompt">删除部分：</div> <div id="answer"> <select id="removecontent"> <option>选择要删除的部分</option> </select> </div> </div> - PHaeLiX

@wirey 如果我在同一页上有多个实例，我只需要堆叠jQuery代码并更改div名称以关闭吗？我尝试过了，最初的代码仍然有效，但下一部分没有任何反应。 [链接]（http://jsfiddle.net/jU5wA/8/） - PHaeLiX

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Deadlykipper · Answer 1

.slideDown() 方法可以动画地改变匹配元素的高度。这会导致页面的底部向下滑动，为显示的项目让出空间。

我没有看到任何提示告诉我们你如何首先隐藏元素。只需使用.show() 和 .hide() 即可。