Question

我正在尝试使用twitter bootstrap模式和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>

我尝试了以下 jquery脚本：

$(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没有被隐藏。

我的问题是实现这个目标的最佳方法是什么？

由于克里斯

Answer 1

您的选择器很好，但问题是您不能直接在div内table;仅限于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>

$('#row3').hide(); // hide row3

隐藏引导模式中的div元素

1 个答案: