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

Question

我有一个 select 菜单，一些 div 与之关联。我希望 select 菜单根据 select 菜单值隐藏/显示 divs。但是如果 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 对象的 length 检查匹配项

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

我个人认为这是一种糟糕的用户体验，更好的方法是删除或禁用没有匹配项的 <option>。

$('option').filter(function(){
    return !$('#' + this.value).length;
}).remove()// or prop('disabled', true);

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，则显示不同的结果

Display different result if didn't find the ID in jQuery

html

javascript

css

jquery

toggle