Question

我是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 show：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向下滑动的部分时，但不会显示任何选择框。当我将其更改回添加时，它不会隐藏编辑滑动的垃圾。我想至少会取得一些进展。再次感谢您的帮助。

Answer 1

.slideDown()方法可以设置匹配元素的高度。这会导致页面的下半部分向下滑动，为显示的项目腾出空间。

我没有看到任何东西告诉我们你是如何隐藏这些元素的。只需使用.show()和.hide()即可。

使用带有选择框的jQuery显示/隐藏Div

1 个答案: