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>

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

1 个答案: