将范围滑块放入下拉菜单答案

【问题标题】：Place Range Slider into a DropDown将范围滑块放入下拉菜单
【发布时间】：2022-11-05 20:04:46
【问题描述】：

如何将范围滑块放入下拉列表中？我认为有一种简单的方法可以做到这一点，但我不确定最好的方法。

我想像其他人一样将范围滑块隐藏到下拉列表中，并使其在我单击“日期”按钮时弹出范围滑块并且您可以使用它。

这是一些示例代码。我不喜欢把它放在这样的桌子上。请记住，此范围滑块过滤数据表对象。我正在使用一些引导程序、jQuery、离子范围滑块和自定义 css。

<form class="form">
    <div class="select">
        <select id="categorySelector" class="form-select selectpicker" data-width="100%" data-size="8"
            name="country" data-dropdown>
            <option value="">&#xf3c5;&nbsp;&nbsp;Category (All)</option>
            <option value="Option 1">&nbsp;&nbsp;Option 1</option>
            <option value="Option 2">&nbsp;&nbsp;Option 2</option>
            <option value="Option 3">&nbsp;&nbsp;Option 3</option>
        </select>
    </div>
    <br>
    <table id="myRangeSlider" cellspacing="5" cellpadding="5">
        <tbody>
            <tr>
                <td>
                    <p class="js-input-from" id="min" name="min" value="0">
                </td>
                <td style="width:100%;"><input type="text" class="js-range-slider" value="" /></td>
                <td>
                    <p class="js-input-to" id="max" name="max" value="0">
                </td>
            </tr>
        </tbody>
    </table>
</form>

一些图书馆

<!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <!-- Datatables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

    <!-- For Bootstrap Select -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

    <!--Range Slider -->
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>

【问题讨论】：

标签： javascript html jquery css drop-down-menu

【解决方案1】：

弄清楚了。如果要将下拉列表放入下拉列表中，只需将以下代码与引导程序一起使用即可。

<div id="rangeDropdown" class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    &#xf133;&nbsp;&nbsp;Date
                </button>
  <ul id="myRangeSlider" class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <p class="js-input-from" id="min" class="minSlider" name="min" value="0">
      <p style="width:100%;"><input type="text" class="js-range-slider" value="">
        <p class="js-input-to" id="max" class="maxSlider" name="max" value="0">
  </ul>
</div>

【讨论】：