ラジオボタンの選択時にブートストラップドロップダウンリストを変更する必要があります

Question

ここではラジオボタンとドロップダウンセットもあります。私は別のラジオボタンを選択しているときに、プルダウンメニューの設定したリストを変更したいと思います。

例： I a）は果物が表示されるかどうかを選択すると、

a) fruits b) vegetables 

し、ドロップダウンとしてラジオボタンがあります。

• apple 
    • banana 
    • orange 

とBを選択すると）野菜：

• cabbage 
    • carrot 
    • onion 

私は同じもののためのJavaスクリプトを書く方法を教えてください：

ラジオ：

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-warning active"> 
    <input type="radio" name="eating" id="fruits" autocomplete="off" checked> FRUITS 
    </label> 
    <label class="btn btn-warning active"> 
    <input type="radio" name="eating" id="vegetables" autocomplete="off"> VEGETABLES 
    </label></div> 

ドロップダウン：

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
dropdown list 
<span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">apple</a></li> 
    <li><a href="#">banana</a></li> 
    <li><a href="#">orange</a></li> 
    </ul></div> 

と、リストに置き換えする必要があります。

<li><a href="#">cabbage</a></li> 
    <li><a href="#">carrot</a></li> 
    <li><a href="#">onion</a></li> 

Answer 1

次の2つの異なるドロップダウンメニューを使用し、常にその1を示すことができましたラジオボタンがアクティブです。ラジオボタンがchangeTo -functionを呼び出し、その関連のドロップダウンのIDを与える必要があり したがって：

<input type="radio" name="eating" id="fruits" autocomplete="off" onchange="changeTo('dropdownmenu1');"> 
<input type="radio" name="eating" id="vegetables" autocomplete="off" onchange="changeTo('dropdownmenu2');"> 

changeToスクリプトは次のようになります。

var currentDP="dropdownmenu1"; 
function changeTo(id){ 
document.getElementById(id).classList.toggle("hidden"); // show new dropdown 
document.getElementById(currentDP).classList.toggle("hidden"); // hide old dropdown 
currentDP=id; 
} 

Answer 2

は私のコードを参照してください：

$(document).ready(function() { 
    $('input[type=radio]').on('click', function() { 
     var isChecked = $(this).is(':checked'); 
     var name = $(this)[0].id; 
     $('.dropdown-menu').empty(); 
     var lst = $('.dropdown-menu'); 
     if (isChecked && name === "fruits") { 
      lst.append('<li><a href="#">apple</a></li>'); 
      lst.append('<li><a href="#">banana</a></li>'); 
      lst.append('<li><a href="#">orange</a></li>'); 
     } 
     if (isChecked && name === "vegetables") { 
      lst.append('<li><a href="#">cabbage</a></li>'); 
      lst.append('<li><a href="#">carrot</a></li>'); 
      lst.append('<li><a href="#">onion</a></li>'); 
     } 
    }); 
}); 

を