选择特定选项时无法加载字段（语义 ui 和 jquery）

Question

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

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>

选择特定选项时无法加载字段（语义 ui 和 jquery）

Unable to load fields when certain option is selected (semantic ui and jquery)

html

javascript

jquery

semantic-ui