특정 옵션이 선택되었을 때 필드를로드 할 수 없습니다 (의미 ui 및 jquery)

Question

'카테고리 선택'옵션을 선택하면 의미 드롭 다운 메뉴가 나타납니다. 다른 드롭 다운 (카테고리 선택)을로드해야합니다. 아무 것도 선택하지 않으면 다른 드롭 다운을로드해서는 안됩니다. 나는 hide와 show를 사용하여 시도했지만 올바른 출력을 얻지 못하고있다. 이것이 어떻게 행해지는지 제안하십시오.

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>