如何获取文本下拉切换 Bootstrap？答案

【问题标题】：How to get text dropdown toggle Bootstrap?如何获取文本下拉切换 Bootstrap？
【发布时间】：2021-09-06 03:11:08
【问题描述】：

我的页面上有两个切换下拉菜单。

Field:
    
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false" onclick="DataField();">
        Select the Field
      </button>
      <ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item">Code</a></li>
        <li><a class="dropdown-item">Office</a></li>
        <li><a class="dropdown-item">Type</a></li>
        <li><a class="dropdown-item">Name</a></li>
        <li><a class="dropdown-item">Usual Name</a></li>
        <li><a class="dropdown-item">Birth Date</a></li>
        <li><a class="dropdown-item">Address</a></li>
        <li><a class="dropdown-item">Number</a></li>
        <li><a class="dropdown-item">Complement</a></li>
        <li><a class="dropdown-item">Neighborhood</a></li>
        <li><a class="dropdown-item">ZIP</a></li>
        <li><a class="dropdown-item">City</a></li>
        <li><a class="dropdown-item">State</a></li>
        <li><a class="dropdown-item">Country</a></li>
        <li><a class="dropdown-item">Spouse Name</a></li>
        <li><a class="dropdown-item">Father Name</a></li>
        <li><a class="dropdown-item">Mother Name</a></li>
      </ul>
    </div>
    
    <br/>
    
    Type of search:
    
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="SearchTypeBtn" data-bs-toggle="dropdown" aria-expanded="false">
        Select the search
      </button>
      <ul id="SearchType" class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="SearchTypeBtn">
        <li><a class="dropdown-item" data-value="Begins with" >Begins with</a></li>
        <li><a class="dropdown-item" data-value="Equal to" >Equal to</a></li>
        <li><a class="dropdown-item" data-value="Ends with" >Ends with</a></li>
        <li><a class="dropdown-item" data-value="Contains" >Contains</a></li>
        <li><a class="dropdown-item" data-value="Contains the parts" >Contains the parts</a> 
       </li>
      </ul>
    </div>

我需要从用户选择的第二个下拉列表中获取文本。我需要通过下拉 ID 进行引用，这样它就不会与第一个下拉列表混淆。我已经尝试了几种方法来从用户单击的选项中获取文本，但我总是得到 undefined undefined undefined ... 有什么方法可以让用户选择的文本不给 undefined？

我试过了

 $("#SearchType a").on('click', function(e) {
    e.preventDefault(); // cancel the link behaviour
    selText = $(this).text();
    $("#SearchTypeBtn").text(selText);
  });

我试过02：

selText = $('#SearchType').children(':selected').text();

我试过03：

$("#SearchType").change(function() {
        selText = $(this).find("option:selected").text();
    });

我试过04：

$(document).ready(function(){
        $("#SearchType a").click(function(){
            selText = $("#SearchTypeBtn").text($(this).text());
        });
    });

我试过05：

selText = $("#SearchType :selected").text();

我试过06：

 $('#SearchType li a').on('click', function(){
    selText = $('#SearchType').val($(this).text());
    });

【问题讨论】：

请添加您的输出截图。
为什么使用 btn 而不是 select？在你的情况下，我认为选择会更容易。

标签： javascript html dropdown

【解决方案1】：

您使用了错误类型的元素。您需要的是一个选择元素。您当前使用的是超链接。

来自 Bootstrap 文档：下拉菜单是可切换的上下文叠加层，用于显示 链接列表。 Bootstrap Dropdowns

我建议使用选择元素：Bootstrap Selects

html

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

然后只需使用它来获取 w/jQuery 的选定值。

$( "#myselect" ).val()

【讨论】：