Question

我有一个包含多个选择输入的页面，其格式如下

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="col-sm-7">
                <select class="selectpicker" name="productType" id="productType">
                    <option value=""></option>
                    <option value="Cereal">Cereal</option>
                </select>
            </div>
        </div>
    </div>
</div>

我要做的是仅在选择了上一个选择时显示选择输入。要做到这一点，我基本上是在做

$( "#productType" ).change(function() {
   if($(this).val() != '') {
       $('#yearRow').css('display', 'block');
   } else {
       $('#yearRow').css('display', 'none');
   }
});

我已经设置了JSFiddle

虽然我的作品有，但我觉得它会变得难看。原因我说这是因为如果您选择第一个输入，然后选择第二个输入，然后取消选择第一个输入，则第三个输入将保留。我可以处理每个选择更改函数中每个输入的显示，但这是我认为它会变得混乱的地方。基本上，我想避免这个

$( "#productType" ).change(function() {
   if($(this).val() != '') {
       $('#yearRow').css('display', 'block');
   } else {
       $('#yearRow').css('display', 'none');
       $('#monthRow').css('display', 'none');
       $('#idRow').css('display', 'none');
       //Any other rows
   }
});

有没有更好的方法来做我想做的事情？

由于

Answer 1

你可以试试这个：

为所有选择及其row父母添加一些课程。

然后你可以像这样使用select的类选择器：

$( ".selectpicker" ).change(function() {
    var $this = $(this);

    //Display Next Select
    if ($this.val().toString().length) {
        $this.closest('div.select-parent').next('div.select-parent').removeClass('hiddenRow');
        return;
    }

    //Hide Next All Selects
    $this.closest('div.select-parent').nextAll('div.select-parent').addClass('hiddenRow')
       .find('select').val("").selectpicker('refresh'); //Refresh Select
});

这是FIDDLE。

根据先前的选择显示输入

1 个答案: