0

Twitterのブートストラップモーダルとjqueryを使用して、前のドロップダウンの質問で行った選択に基づいて、モーダルのdivの数を表示しようとしています。つまり、1を選択すると、モーダルのdivが1つだけ表示され、3を選択すると、モーダルのdivが3つ表示されます。

フィルタの質問：

    <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();
            }
        }
    });
});

ただし、divftype2とftype3は非表示になりません。

私の質問は、これを達成するための最良の方法は何ですか？

ありがとうクリス

4

1 に答える 1

1

セレクターは問題ありませんが、問題は、 ;のdiv中に直接入れることができないことです。またはtableでのみ。テーブル内の行を非表示にしようとしている場合は、行IDを指定してから、非表示にする行を選択します。tdth

<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 に答える