当某些选项被选中时，无法加载字段（语义ui和jquery）

Question

当我选择'选择类别'选项时，它应该加载另一个下拉列表（选择类别），我有一个语义ui下拉列表。如果我不选择任何内容，则不应加载此其他下拉菜单。我尝试使用隐藏和显示，但我没有得到正确的输出。请建议如何做到这一点。

HTML代码： -

<div class="ui icon top left pointing dropdown button blue" id="dropdown1"> 
       <i class="sort content descending icon"></i> 
        <span class="text">Advance Filter</span> 
       <div class="menu"> 
        <div class="header">All Categories</div> 
        <div class="item">Select Categories</div> 
       </div> 
       </div> 

      <select id="category" name="activity-filter" multiple="" class="ui dropdown" style="display:none;"> 
      <i class="filter icon"></i> 
     <option value="">Select Category</option> 
     <option class="header">--All--</option> 
     <option value="0">rst</option> 
     <option value="1">lmn</option> 
     <option value="2">abc</option> 
     <option value="3">pqr</option> 
     <option value="12">Other</option> 
     </select> 

     <button class="ui primary button"> 
     Submit 
     </button> 

     <button class="ui button show-all"> 
     Clear 
     </button> 
     <br> 
     <br> 

的jQuery： -

<script> 
$('#dropdown1').dropdown(
    { 
onChange: function(val) { 

    if(val=='select categories') 
    { 
    $('#category').show(); 
    } 
    else 
    { 
    $('#category').hide(); 
    } 
} 
} 
); 
</script> 

Answer 1

我粘贴你的代码中，你上面提供 - 它似乎正常工作？

$('#dropdown1').dropdown(
 
    { 
 
onChange: function(val) { 
 

 
    if(val=='select categories') 
 
    { 
 
    $('#category').show(); 
 
    } 
 
    else 
 
    { 
 
    $('#category').hide(); 
 
    } 
 
} 
 
} 
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script> 
 
<div class="ui icon top left pointing dropdown button blue" id="dropdown1"> 
 
       <i class="sort content descending icon"></i> 
 
        <span class="text">Advance Filter</span> 
 
       <div class="menu"> 
 
        <div class="header">All Categories</div> 
 
        <div class="item">Select Categories</div> 
 
       </div> 
 
       </div> 
 

 
      <select id="category" name="activity-filter" multiple="" class="ui dropdown" style="display:none;"> 
 
      <i class="filter icon"></i> 
 
     <option value="">Select Category</option> 
 
     <option class="header">--All--</option> 
 
     <option value="0">rst</option> 
 
     <option value="1">lmn</option> 
 
     <option value="2">abc</option> 
 
     <option value="3">pqr</option> 
 
     <option value="12">Other</option> 
 
     </select> 
 

 
     <button class="ui primary button"> 
 
     Submit 
 
     </button> 
 

 
     <button class="ui button show-all"> 
 
     Clear 
 
     </button> 
 
     <br> 
 
     <br>