时间戳

首页 > 解决方案 > 将所选选项显示为 Html 和 JavaScript 中的引导下拉菜单

javascript - 将所选选项显示为 Html 和 JavaScript 中的引导下拉菜单

问题描述

是否可以在 Bootstrap、HTML 和 JavaScript 中创建像这样的多选复选框下拉菜单。

我已经尝试过我无法实现它。我也是 JavaScript 的新手但是我只是在探索 JS 并让它工作，但这对我来说似乎真的很有挑战性。我不知道如何为此实现 JS 脚本。

例如：如果用户在多选复选框中选择国家，我希望它显示所有国家名称而不是选择选项。

代码：

        <div>Country</div>
        <div class="row" name="country_checkbox" id="id_row">
          <div class="dropdown">
            <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">
              <span id="selected">Choose option</span><span class="caret"></span></a>


          <ul id="id_country">
            <li><label for="id_country_0"><input type="checkbox" name="country" value="US"
                  placeholder="Select Country" id="id_country_0" onclick="filter_type();">
                US</label>

            </li>
            <li><label for="id_country_1"><input type="checkbox" name="country" value="India"
                  placeholder="Select Country" id="id_country_1" onclick="filter_type();">
                India</label>

            </li>
            <li><label for="id_country_2"><input type="checkbox" name="country" value="Japan"
                  placeholder="Select Country" id="id_country_2" onclick="filter_type();">
                Japan</label>

            </li>
            <li><label for="id_country_3"><input type="checkbox" name="country" value="UK"
                  placeholder="Select Country" id="id_country_3" onclick="filter_type();">
                UK</label>
            </li>

          </ul>
        </div>

js小提琴在这里：http: //jsfiddle.net/shalman44/92drs7ax/3/

标签： javascripthtml

解决方案

由于您已经在使用引导程序，因此您可能还想使用 jQuery。有一个名为 bootstrap-select 的插件，用于实现类似于您的示例中的多选，其中语法如下：

<select class="selectpicker" multiple>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

$(function () {
    $('select').selectpicker();
});

您可能还想看看这个问题。

推荐阅读