选择无线电按钮后，需要在Bootstrap下拉列表中更改列表

Question

在这里，我也有一组无线电按钮和一个下拉列表。选择不同的无线电按钮时，我想更改下拉列表中的填充列表。

eg：我有单选按钮

    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>

，列表应替换为：

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

Answer 1

您可以使用两个不同的下拉菜单，并始终显示放射性菜单活跃的菜单。因此，RadioButtons必须调用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');"> 

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