Jquery 在boothstrap模式中隐藏div元素

我正在尝试使用twitter引导模式和jquery来显示一个模式中的div数，该模式基于在前面的下拉问题中所做的选择。换句话说，如果选择1，则仅显示模式中的一个div，如果选择3，则显示模式中的三个div

过滤问题：

    <select id='species1'>
    <option value="">Number of Species</option>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    </select>

    <div class='btn btn-primary'><button type="button" id="nextbttn">Next</button></div>

<div class="modal hide fade in" style = "width:950px; left:25%; display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">X</a>
</div>

<div class="modal-body">
<table border=1>
<div id="ftype1">
<tr>
<td colspan=3>
<h3><center>ITEM 1</center></h3>
</td>
</tr>
<tr>
<td>
    <select id='xtype1'>
    <option value="">Type 1</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    </select>
</td>
<td>
    Number of pounds: <input type="text" size="5">
</td>
<td>
    Cost per pound: <input type="text" size="5">
</td>
</tr>
</div> <!-- ftype1 -->

<!------------------------------------------------ -->

<div id="ftype2">
<tr>
<td colspan=3><h3><center>ITEM 2</center></h3></td>
</tr>
<tr>
<td>
    <select id='xtype2'>
    <option value="">Type 2</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    </select>
</td>
<td>
    Number of pounds: <input type="text" size="5">
</td>
<td>
    Cost per pound: <input type="text" size="5">
</td>
</tr>
</div> <!-- ftype2 -->

<!------------------------------------------------ -->

<div id="ftype3">
<tr>
<td colspan=3><h3><center>ITEM 3</center></h3></td>
</tr>
<tr>
<td>
    <select id='xtype3'>
    <option value="">Type 3</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
    <option value="05">05</option>
    </select>
</td>
<td>
    Number of pounds: <input type="text" size="5">
</td>
<td>
    Cost per pound: <input type="text" size="5">
</td>
</tr>
</div> <!-- ftype3 -->

<div class="modal-footer">
<div class='btn btn-primary'><input name="commit" type="submit" value="Submit" /></div>
<div class="btn" data-dismiss="modal">Close</div>
</div>
</div>

$(document).ready(function() {
    $("#nextbttn").click(function() {
        var type1 = $('#species1').val();
        if (type1 != '00') {
            if (type1 == '01') {
                $('.modal').modal({
                    backdrop: false
                });
                $('#ftype2').hide();
                $('#ftype3').hide();
            }
        }
    });
});

但是div ftype2和ftype3没有被隐藏

我的问题是实现这一目标的最佳方式是什么

谢谢

---

Chris

您的选择器很好，但问题是您不能将

div

直接放在

表中；仅在
td
或
th
中。如果试图隐藏表中的行，请提供行id，然后选择要隐藏的行

<table>
  <tr id="row1"><td><!-- stuff --></td></tr>
  <tr id="row2"><td><!-- stuff --></td></tr>
  <tr id="row3"><td><!-- stuff --></td></tr>
</table>

模式窗口的标记中存在输入错误。请你把它们修好，这样我们知道这不是问题所在。例如，有一些属性缺少引号（例如，
id=“ftype3”
）的
class
）。另外，
nextbtn
在哪里？因为这是触发器，所以应该包含它的标记并指示它的上下文。。。我想我抓住了所有的打字错误，并为触发modal.Nope的按钮添加了代码
border=1
，
colspan=5
不是有效的XML。这会防止DIV被隐藏吗？？我怎样才能完成我想要的？谢谢你的解释和解决方案！！