1. 首页
  2. 问答
  3. 显示行取决于下拉选项

显示行取决于下拉选项

2016-08-23 67 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

相关问题

 相关问题