隱藏在一個boothstrap模式的div元素

我想使用twitter引導模態和jquery來顯示基於前面的下拉問題中作出的選擇模式的div的數量。換句話說，如果選擇1，則只顯示模態中的一個div，如果選擇了3，則顯示模態中的三個div。隱藏在一個boothstrap模式的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(); 
      } 
     } 
    }); 
});

但divs ftype2和ftype3不被隱藏。

我的問題是完成此操作的最佳方式是什麼？

感謝克里斯

來源

2012-07-21 ChrisJ

有在您的標記爲模態窗口錯別字。你能解決它們嗎，所以我們知道這不是問題。例如，有少數屬性缺少引用（例如'id =「ftype3」''的class）。另外，'nextbttn'在哪裏？既然這是觸發器，那麼包含其標記並指明其上下文將是有意義的。 – merv 2012-07-21 21:42:24

謝謝Merv ... 認爲我抓住了所有的拼寫錯誤，並添加了觸發模式的按鈕的代碼。 – ChrisJ 2012-07-21 23:06:25

不是。 'border = 1'，'colspan = 5'不是有效的XML。 – merv 2012-07-22 01:11:11

你的選擇是好的，但問題是，你不能有一個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

來源

2012-07-22 04:18:17 merv

謝謝你的解釋和解決方案！ – ChrisJ 2012-07-22 10:49:53

隱藏在一個boothstrap模式的div元素

回答

相關問題