當某些選項被選中時，無法加載字段（語義ui和jquery）

當我選擇'選擇類別'選項時，它應該加載另一個下拉列表（選擇類別），我有一個語義ui下拉列表。如果我不選擇任何內容，則不應加載此其他下拉菜單。我嘗試使用隱藏和顯示，但我沒有得到正確的輸出。請建議如何做到這一點。當某些選項被選中時，無法加載字段（語義ui和jquery）

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>

來源

2017-09-08 SNEHAL GUPTA

似乎沒有任何修改的工作？ –

這不起作用，我希望選擇類別下拉菜單僅在從advacnced過濾器下拉菜單中選擇了選擇類別時在頁面上可見 –

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

$('#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>

來源

2017-09-08 12:32:53

感謝您分享完整的代碼！我使用2.2.4版本的語義UI腳本，當我更改爲13時它工作。 –

但是爲什麼下拉式的設計已經改變。它不是現在作爲下拉菜單，並有滾動。我該如何糾正它？請suggset –

您需要將#category設置爲JS中的下拉菜單...請參閱： https://jsfiddle.net/w79sLpL9/1/ –

當某些選項被選中時，無法加載字段（語義ui和jquery）

回答

相關問題