根据下拉选择隐藏 div

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>

当两个选项都没有选择时，这个link需要隐藏：

<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

监听两个 select 元素的 change 事件。遍历它们以确定有多少人选择了值，并根据计数有条件地显示 link。

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

Hide div based on dropdown selection

jquery

show

hide