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

Question

我使用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>

Answer 1

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