用选定的选项文本替换引导程序下拉默认文本答案

【问题标题】：Replace bootstrap downdrop default text with selected option's text用选定的选项文本替换引导程序下拉默认文本
【发布时间】：2018-09-20 07:29:42
【问题描述】：

如何在用户选择时让引导下拉选择替换默认文本？我只能找到使用选择框执行此操作的建议，而不是专门使用 Bootstrap 4 下拉菜单。

当用户选择下拉选项时，我希望更新它开头的“请选择”。目前，当用户做出选择时，下拉菜单会再次隐藏。

        <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Please Select //here is where I would like to be updated
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                  <button class="dropdown-item" type="button">Action</button>
                  <button class="dropdown-item" type="button">Another action</button>
                  <button class="dropdown-item" type="button">Something else here</button>
                </div>
       </div>

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

下拉菜单并不适合这种情况。也许您应该考虑改用输入选择？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="form-group">
    <label for="sel1">Please Select</label>
    <select class="form-control" id="sel1">
      <option value="" disabled selected>Select your option</option>
      <option>Action</option>
      <option>Another action</option>
      <option>Something else here</option>
    </select>
  </div>
</div>

【讨论】：