Question

这是我的HTML代码。

   <table>
   <tr>
   <select class="dropdown">
   <option value="">Select answer</option>
   <option value="1" selected="selected">A</option>
   <option value="2">B</option>
   <option value="3">C</option>
   </select>
   </td>
   <td>
   <select class="dropdown">
   <option value="">Select answer</option>
   <option value="1" >Yes</option>
   <option value="2">No</option>
   <option value="3">N.A.</option>
   </select>
   </td>
   </tr>
   <td>
   <select class="dropdown">
   <option value="">Select answer</option>
   <option value="1" >Yes</option>
   <option value="2">No</option>
   <option value="3">N.A.</option>
   </select>
   </td>
   </table>

这是我的jquery代码。

                    $('TABLE TR').find('select:gt(1)').prop('disabled',true)
                    $('TABLE TR').find('select').bind('change',function()
                    {
               $(this).next('select').prop('disabled',false)                          
      });

我想根据第一个下拉框的值启用下一个下一个下拉值。请有人帮忙..

Answer 1

试试这个小提琴：http://jsfiddle.net/xJVam/

在此示例中，第二个下拉菜单仅在选择B时启用，第三个下拉菜单在选择C时启用。但是我不确定你想要什么。

Answer 2

根据您的需要进行修改

$("select.dropdown").change(function(){
if($(this).val()==='2')
{  
   $(this).nextAll().find("select:first").prop("disabled",true);
}

});

http://jsfiddle.net/4ShsC/1/

Answer 3

另一种方法：

var $selects = $('table tr select');

$selects.each(function(i) {
    $(this).prop('disabled', i != 0)
           .bind('change', function() {
                $selects.eq(i + 1).prop('disabled', false);
            });
});

（demo）

注意：插入了遗失的<td>和<tr> ... </tr>。

立即获取下拉到当前下拉列表

3 个答案: