Question

我有一个选择菜单，有些div与之关联。我希望选择菜单根据选择菜单值隐藏/显示div。但是如果jQuery没有找到关联div，那么它应该警告一些文本。

这是我的代码：

$('select').change(function(){
  var div = $(this).val();
  $('#results div').hide();
  $('#' + div).show();
});

#results div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="div_1">Div 1</option>
  <option value="div_2">Div 2</option> 
  <option value="div_3">Div 3</option> 
</select>

<div id="results">
  <div id="div_1">Div 1</div>
  <div id="div_2">Div 2</div>
</div>

正如您在上面的示例中所看到的，没有DIV 3所以我想要一个警告说没有找到DIV 3。

任何形式的帮助表示赞赏：）

Answer 1

使用jQuery对象的 <div id = "foo"></div> <div id = "bar"></div>来检查匹配

length

我个人认为这是一种糟糕的用户体验，更好的方法是删除或禁用不匹配的$('select').change(function() { var $div = $('#' + $(this).val()).show(); if ($div.length) { $('#results div').not($div).hide(); } else { alert('No Match') } });。

<option>

Answer 2

检查此fiddle

$('select').change(function(){
     var div = $(this).val();
     $('#results div').hide();
    if($('#results').find('#' + div).length > 0){
      $('#' + div).show();
    } else{
      alert("not find")
    }
});

如果在jQuery中找不到ID，则显示不同的结果

2 个答案: