小编New*_*bie的帖子

Bootstrap 5:如何使用另一个按钮正确切换下拉菜单

所以我有一个下拉菜单,旁边有一个按钮。目的是让按钮打开和关闭下拉菜单,单击下拉框中的文本也应该打开和关闭菜单。

我一直在尝试使用 Bootstrap 5 的另一个按钮来调整这篇文章 Toggle bootstrap button dropdown中的工作 Bootstrap 3 代码,但无法让它完全正常工作,就像我希望的那样。任何帮助将不胜感激。

我的代码如下:

<div class="btn-group">
  <a id="test-dropdown-btn" class="btn dropdown-toggle" data-bs-toggle="dropdown">Select Category</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">All Categories</a></li>
      <li><a class="dropdown-item">Categoty One</a></li>
      <li><a class="dropdown-item">Categoty Two</a></li>
      <li><a class="dropdown-item">Categoty Three</a></li>
      <li><a class="dropdown-item">Categoty Four</a></li>
      <li><a class="dropdown-item">Categoty Five</a></li>
    </ul>
</div>

 <a id="test-btn" class="btn btn-primary" data-bs-toggle="dropdown" data-bs-target=".btn-group">&#9660</a>
Run Code Online (Sandbox Code Playgroud)

jsfiddle在这里:https ://jsfiddle.net/Ernesto1/gefvd0s1/17/

dropdown bootstrap-5

3
推荐指数
1
解决办法
3529
查看次数

用户从表单中的选项中选择城市并将经度和纬度传递给 api

我想将经度和纬度传递给 geonames api。目前我有两个选择字段,用户可以在其中选择城市经度和相应的城市纬度:

<select id="selectLat">
    <option value="30.26057">Chicago Latitude</option>
    <option value="51.5074">London Latitude</option>
    <option value="50.0755">Prague Latitude</option>
    
</select>

<select id="selectLng">
    <option value="-97.771889">Chicago Longitude</option>
    <option value="0.1278">London Longitude</option>
    <option value="14.4378">Prague Longitude</option>
</select>
            
Run Code Online (Sandbox Code Playgroud)

提交选择后,值将传递给 geonames api,我可以使用返回的 JSON 数据。但我真正想要发生的是,用户只选择城市名称。经度和纬度值将被组合,然后以某种方式解析/分离并传递给 api。有没有办法做到这一点?

我正在使用 jQuery 和 php 来处理 api 请求 btw。

$.ajax({
            url: "test.php",
            type: 'POST',
            dataType: 'json',
            data: {
                 lat: $('#selectLat').val(),
                 lng: $('#selectLng').val()
            },
Run Code Online (Sandbox Code Playgroud)

html javascript jquery

0
推荐指数
1
解决办法
48
查看次数

标签 统计

bootstrap-5 ×1

dropdown ×1

html ×1

javascript ×1

jquery ×1