Question

我的要求是如果上面一行的值中的所有下拉菜单都不是“选择答案”，则显示一行。如果任何下拉菜单的答案是“选择答案”，则应忽略其行下一行中的所有下拉菜单。我怎样才能做到这一点。任何想法。
以下是我的HTML代码..

 <table>
<tr>
    <td>
         <select  id="S1"  class="dropdown">
            <option value="" selected="selected">Select answer</option>
            <option value="1" >A</option>
            <option value="2">B</option>
            <option value="3">C</option>
        </select>
    </td>
            <td>
    <select id="S2"  class="dropdown">
        <option value="" selected="selected">Select answer</option>
        <option value="1">A</option>
        <option value="2" >B</option>
        <option value="3">C</option>
    </select>
    </td>

</tr>
<tr>
    <td>
    <select id="S2"  class="dropdown">
        <option value="" selected="selected">Select answer</option>
        <option value="1">A</option>
        <option value="2" >B</option>
        <option value="3">C</option>
    </select>
    </td>
            <td>
    <select id="S2"  class="dropdown">
        <option value="" selected="selected">Select answer</option>
        <option value="1">A</option>
        <option value="2" >B</option>
        <option value="3">C</option>
    </select>
    </td>
    </tr>
 </table>

Answer 1

从使用内联样式隐藏的所有内容开始，或者最好使用jquery执行。然后是：

$('select.dropdown').bind('change',function() {
    var showNext = true;
    $('select.dropdown:visible').each( function() {
        if ( $(this).val() == '' ) showNext = false; 
    });
    if ( showNext ) {
       $('select.dropdown:hidden:first').show();
    }
});

我认为它可能更好，但不是在表格中，你应该真的有选择的标签元素。这将需要隐藏和显示相关的选择。

Answer 2

首先，id应始终在不在您指定的标记中的页面上唯一。请尝试以下代码

$(function(){
var firstTr = $("table tr:first");
firstTr.next("tr").hide();

firstTr.find('select.dropdown').bind('change',function() {
    var showNextTr = $(this).val() != "";
    if(showNextTr){
      firstTr.find('select.dropdown').each( function() {
          if ( $(this).val() == '' ){ 
             showNextTr = false; 
             return false;
          }
      });
    }

    if ( showNextTr ) {
       firstTr.next("tr").show();
    }
    else{
       firstTr.next("tr").hide();
    }
});
});

Answer 3

我创建了一个jsFiddle，其中包含有效的代码。我建议修改它以使用更多的语义标记，你将不得不添加一些逻辑来检查堆栈（最顶层的tr）以确保只显示需要显示的那些，但这应该会让你非常回答问题的良好起点。

完成上述所有行中所有下拉列表的选择后，显示下一行

3 个答案: