0

我正在尝试使用 twitter bootstrap modal 和 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 并没有被隐藏。

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

谢谢克里斯

4

1 回答 1

1

您的选择器很好，但问题是您不能div直接在 a 中使用 a 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
于 2012-07-22T04:18:17.687 回答