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

Question

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

我已经尝试过但无法实现。我也是 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/

Answer 1

既然您已经在使用 bootstrap，您可能还想使用 jQuery。 有一个名为 bootstrap-select 的插件用于实现像您的示例中那样的多重选择，其语法如下：

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

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

您可能还想看看

这个问题

。

我刚刚用“bootstrap multiselect”搜索了谷歌，我发现了这个

Answer 2

    $(document).ready(function() {
        $('#multiple-checkboxes').multiselect({
          includeSelectAllOption: true,
        });
    });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">


<div class="">
    <strong>Select Language:</strong>
    <select id="multiple-checkboxes" multiple="multiple">
        <option value="php">PHP</option>
        <option value="javascript">JavaScript</option>
        <option value="java">Java</option>
        <option value="sql">SQL</option>
        <option value="jquery">Jquery</option>
        <option value=".net">.Net</option>
    </select>
</div>