在Bootstrap Select中下拉

时间:2016-10-11 20:56:55

标签: jquery html select bootstrap-select

我试图在群组中显示我的选项,但我希望它会像下拉菜单,例如我们有

  • 选项1
  • 选项2
  • 选项3

当用户点击选项2时,会打开一个下拉菜单,其中包含

  • sub_option 1
  • sub_option 2
  • sub_option 3

有什么方法可以通过bootstrap select来做到这一点? 如果没有,你能建议我这样做吗?!

每个身体

1 个答案:

答案 0 :(得分:0)

你走了:



$(document).ready(function() {
    $('#Rank').bind('change', function() {
        var elements = $('div.container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if somethings' selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="airman">Airman</option>
    <option value="senior-airman">Senior Airman</option>
</select>

<div class="container">
    <div class="airman">
        Line of text for Airman
    </div>
    <div class="senior-airman">
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div class="airman">
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div class="senior-airman">
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>
&#13;
&#13;
&#13;