Question

我有以下表格：

<h5>Region</h5>
          <select class="form-control" name="region" id="region" >
                     <option value="">Select a Region</option>
                     <option value="US">US</option>
                     <option value="UK">UK</option>
                     <option value="XS">XS (Sales Team)</option>
                     <option value="XT">XT (Editorial Test)</option>
          </select>
      </div>
      <div class="col-md-3 portfolio-item">
      <h5>Duration</h5>
          <select class="form-control" name="duration" id="duration" >
                     <option value="">Select a Duration</option>
                     <option value="5">5 Minutes</option>
                     <option value="10">10 Minutes</option>
                     <option value="15">15 Minutes</option>
                     <option value="20">20 Minutes</option>
                     <option value="25">25 Minutes</option>
                     <option value="30">30 Minutes</option>
          </select>
      </div>

如果未选择任何选项，则需要隐藏此链接：

<a type="button" class="btn btn-default" id="link" value="JSON feed" target="_blank">Raw JSON</a>

我正在使用以下jQuery来执行此操作：

if($("#region").val() && $("#duration").val() === ''){
    $("#link").hide();
} 
else if{
    $("#region").val() && $("#duration").val() != ''){
    $("#link").show();
}

jsfiddle

Answer 1

聆听两个change元素的select事件。迭代它们以确定有多少选择值，条件显示基于计数的链接。

Updated Example

var $selectElements = $('#region, #duration');

$selectElements.change(function (e) {
    var selectedCount = $selectElements.filter(function() {
        if (this.value) { return this; }
    }).length;
    selectedCount > 1 ? $("#link").show() : $("#link").hide();
});

根据下拉选择隐藏div

1 个答案: