Question

大家好，我想知道是否可以使用提供的选项的首字母对HTML下拉列表进行分类。例如，我纯粹从数据库生成一个下拉列表，并且我无法预测html的v-for循环中的选项。所以，有可能吗？而且我正在使用vue.js框架，并且我已经了解了树功能，但是我不想使用树功能，我正在寻找一种只能包含HTML的方法。

代码：-

<div class="col-xl-7">
    <select size="sm" class="form-control m-input m-input--air" v-model="programDetailID">
        <option v-if="checkProg==true" v-for="program in modelProgram" :value="program.programDetailID">
            {{program.description}}
        </option>
    </select>
</div>

任何和所有帮助将不胜感激。谢谢！！

Answer 1

您可以按照建议使用optgroup，并使其看起来像这样。

假设您的建模水平为category

<div class="col-xl-7">
 <select size="sm" class="form-control m-input m-input--air" v-model="programDetailID">
  <!-- Add a category for loop here -->
  <optgroup v-for="category in categories" :label="category.name">
   <option v-if="checkProg==true" v-for="program in category.modelProgram" :value="program.programDetailID">{{program.description}}</option>
  </optgroup>
 </select>

对HTML Select进行分类

1 个答案: