如何将按钮和输入元素添加到下拉列表中答案

【问题标题】：How to add button and input element into drop down list如何将按钮和输入元素添加到下拉列表中
【发布时间】：2019-10-05 13:37:23
【问题描述】：

我使用 bootstrap Vue 创建了一个简单的选择菜单（下拉菜单）。我的问题是如何在下拉列表中插入按钮和输入元素。下面是我想要实现的示例以及我当前的代码。

更新我仍在努力解决这个问题，非常感谢任何帮助

图1：下拉列表底部插入的按钮

图2：当用户点击按钮时，会有一个输入框供他们输入值。该值将自动插入到下拉列表中

当前代码

    <template>
  <b-container class="empty-container">
    <b-row align-h="center">
      <b-col cols="6">
        <b-form-select v-model="selected" :options="options"></b-form-select>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { value: null, text: "Please select an option" },
        { value: "a", text: "This is First option" },
        { value: "b", text: "Selected Option" },
        { value: { C: "3PO" }, text: "This is an option with object value" }
      ]
    };
  }
};
</script>

<style>
</style>

【问题讨论】：

标签： javascript html vue.js bootstrap-4

【解决方案1】：

我不知道您是否可以使用浏览器的标准下拉菜单。我在想的原因是您将无法可靠地选择浏览器特定下拉列表的 html。所以我会建立自己的下拉菜单，如果点击最后一个选项，将其转换为<input type='text' > 并从中获取值。

【讨论】：