Javascript 选择单选按钮后需要更改引导下拉列表中的列表

这里我有一套单选按钮和一个下拉列表。当我选择不同的单选按钮时，我想更改下拉列表中填充的列表

例如： 我有单选按钮

    a) fruits b) vegetables

选择a）水果时，下拉列表应显示：

    • 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>

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

下拉列表

该清单应替换为：

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

您可以使用两个不同的下拉菜单，并始终显示radiobutton处于活动状态的菜单。 因此，单选按钮必须调用

changeTo

-功能，并给出相关下拉列表的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');"> 

请参阅我的代码：

$(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>');
        }
    });
});

$（文档）.ready（函数（）{
$（'input[type=radio]'）。在（'click'，函数（）{
var isChecked=$（this）.is（'：checked'）；
变量名称=$（此）[0].id；
$（'.dropdown menu'）.empty（）；
var lst=$（'.dropdown menu'）；
如果（已检查&名称==“水果”）{
附加（“
”）；
附加（“
”）；
附加（“
”）；
}
如果（已检查&名称==“蔬菜”）{
附加（“
”）；
附加（“
”）；
附加（“
”）；
}
});
});