1. 首頁
  2. 問答
  3. 顯示行取決於下拉選項

顯示行取決於下拉選項

2016-08-23 158 views
-2

我目前正在嘗試創建表單，但我堅持一點是新手到Javascript和jquery。下面是我使用的HTML顯示行取決於下拉選項

我想要實現的是，當用戶選擇0沒有行顯示，如果他選擇1作爲下拉選項數1行，如果他選擇2作爲下拉選項兩個第1行和第2行顯示並選擇第3行第1行第2行和第3行顯示等等......

你可以幫我一起編寫Javasript還是jQuery？

Number of siblings    
 
<select name="siblingnum"> 
 
    <option>select one</option> 
 
    <option>0</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
</select> 
 
<br> 
 
<br> 
 
<table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="vertical-align: top;">Number<br></td> 
 
     <td style="vertical-align: top;">Name<br></td> 
 
     <td style="vertical-align: top;">Birthdate<br></td> 
 
     <td style="vertical-align: top;">Class<br></td> 
 
     <td style="vertical-align: top;">Gender<br></td> 
 
     <td style="vertical-align: top;">Schoolname<br></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">1<br></td> 
 
     <td style="vertical-align: top;"><input name="name1"><br></td> 
 
     <td style="vertical-align: top;"><input name="date1"></td> 
 
     <td style="vertical-align: top;"><input name="class1"></td> 
 
     <td style="vertical-align: top;"><input name="g1"></td> 
 
     <td style="vertical-align: top;"><input name="sname1"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">2<br></td> 
 
     <td style="vertical-align: top;"><input name="name2"></td> 
 
     <td style="vertical-align: top;"><input name="date2"></td> 
 
     <td style="vertical-align: top;"><input name="class2"></td> 
 
     <td style="vertical-align: top;"><input name="g2"></td> 
 
     <td style="vertical-align: top;"><input name="sname2"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">3<br></td> 
 
     <td style="vertical-align: top;"><input name="name3"></td> 
 
     <td style="vertical-align: top;"><input name="date3"></td> 
 
     <td style="vertical-align: top;"><input name="class3"></td> 
 
     <td style="vertical-align: top;"><input name="g3"></td> 
 
     <td style="vertical-align: top;"><input name="sname3"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">4<br></td> 
 
     <td style="vertical-align: top;"><input name="name4"></td> 
 
     <td style="vertical-align: top;"><input name="date4"></td> 
 
     <td style="vertical-align: top;"><input name="class4"></td> 
 
     <td style="vertical-align: top;"><input name="g4"></td> 
 
     <td style="vertical-align: top;"><input name="sname4"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">5<br></td> 
 
     <td style="vertical-align: top;"><input name="name5"></td> 
 
     <td style="vertical-align: top;"><input name="date5"></td> 
 
     <td style="vertical-align: top;"><input name="class5"></td> 
 
     <td style="vertical-align: top;"><input name="g5"></td> 
 
     <td style="vertical-align: top;"><input name="sname5"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">6<br></td> 
 
     <td style="vertical-align: top;"><input name="name6"></td> 
 
     <td style="vertical-align: top;"><input name="date6"></td> 
 
     <td style="vertical-align: top;"><input name="class6"></td> 
 
     <td style="vertical-align: top;"><input name="g6"></td> 
 
     <td style="vertical-align: top;"><input name="sname6"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-08-23 Jigna Jain

+1

請顯示您的嘗試。這不是一個代碼寫入服務。您需要展示您解決問題的嘗試，這裏的人幫助您解決該問題。 – charlietfl

+0

到目前爲止您嘗試了什麼？你的問題被標記爲javascript，但是你的問題中沒有javascript – baao

+0

歡迎來到SO。請訪問[幫助]並參加[導覽]，查看要詢問的內容和方法。現在你的問題是脫離主題，因爲沒有實際的effor或代碼 – mplungjan

回答

-1

頁使用jQuery的，剛拿到選擇值當你改變選擇，然後隱藏你不通過foreach循環

$(document).ready(function() { 
    $("select").change(function() { 
     var val = $("select").val(); 
     if (val != 'select one') { 
      var tableRows = $("table tr"); 
      jQuery.each(tableRows, function(i ,tr) { 
       if (i > val) { 
        $(tr).hide(); 
       } else { 
        $(tr).show(); 
       } 
      }) 
     } 
     } 
    ) 
});

來源

2016-08-23 11:56:41

1

分裂您tbody在thead和tbody使它不那麼複雜。然後在change回調中使用它們。通過filter和:lt，您可以選擇index的元素。應該很容易理解。

$("select").change(function() { 
 
    var rows = $("tbody tr").hide(); 
 
    var value = $(this).val(); 
 
    
 
    if($.isNumeric(value)) { 
 
     rows.filter(":lt(" + value + ")").show(); 
 
    } 
 
});
tbody tr { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="siblingnum"> 
 
    <option>select one</option> 
 
    <option>0</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
</select> 
 

 

 
<table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> 
 
    <thead> 
 
    <tr> 
 
     <th style="vertical-align: top;">Number 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Name 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Birthdate 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Class 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Gender 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Schoolname 
 
     <br> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td style="vertical-align: top;">1 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name1"> 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date1"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class1"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g1"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname1"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">2 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname2"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">3 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname3"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">4 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname4"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">5 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname5"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">6 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname6"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-08-23 11:48:33 eisbehr

+0

不會產生預期的行爲 – charlietfl

+0

現在糾正@charlietfl請刪除downvote！ Thx提示。 – eisbehr

-3

需要試試這個代碼

$(document).ready(function() { 
    $("select[name='siblingnum']").change(function() { 
     $("tr").show(); 
     var selectValue = eval($(this).val()); 
     $("tr:gt("+selectValue+")").hide(); 
    }); 
});
行

來源

2016-08-23 11:58:30

相關問題

 相關問題