选择单选按钮时需要更改自举下拉菜单中的列表

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

例如：我有单选按钮作为

a) fruits b) vegetables

和下拉，在选择一个）水果应表示：

• apple 
    • banana 
    • orange

和当选择二）蔬菜：

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

来源

2017-02-20 Rahul Sudha

你可以使用两种不同的下拉菜单，并始终显示其在一个单选按钮处于活动状态。因此单选按钮得叫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; 
}

来源

2017-02-20 08:27:09 Siphalor

请参考我的代码：

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

来源

2017-02-20 08:29:08 Tomato32

选择单选按钮时需要更改自举下拉菜单中的列表

回答

相关问题