Question

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

例如：我有单选按钮

    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

您可以使用两个不同的下拉菜单，并始终显示其radiobutton处于活动状态的菜单。因此，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>');
        }
    });
});

选择单选按钮

2 个答案: