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

Posted 2023-03-05

【中文标题】将所选选项显示为 Html 和 JavaScript 中的引导下拉菜单

【英文标题】：Show selected options as the bootstrap dropdown menu in Html & JavaScript

【发布时间】：2021-12-10 17:43:30

【问题描述】：

是否可以在 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/

【参考方案1】：

既然您已经在使用 bootstrap，那么您不妨使用 jQuery。 有a plugin called bootstrap-select 用于实现像您的示例中那样的多选，其中语法如下：

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

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

您可能还想看看this question。

【讨论】：

我有多个复选框，我怎么可能实现它。虽然我想在 bootstrap 5 中实现

@imran_44 你可以创建多个 块。我在答案中链接的页面上有一个指南

我已经实现了它，但是我对下拉列表中的每个选项值都有点击 JS 功能。我怎么能做到。我有在这里正常工作的 JS 功能复选框你可以看到基于用户选择的小提琴特定匹配表行应该出现jsfiddle.net/shalman44/92drs7ax/13

【参考方案2】：

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

    $(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>