前端下拉控件select的备选项option标签的属性key和value以及标签值的区别

说明：“标签值”指<option></option>标签之间的值，例如<option>Hello</option>，标签值为“Hello”。

key属性用于区别不同的<option>，多个key值不能重复，通常取Id作为key值。

value属性是选中某一项之后，<select>控件的返回值，通常也取Id作为value的值。如果没有给定标签值，那么下拉备选项就是value；如果给定了标签值，下拉备选项就是标签值。实例如下：

实例1：没有标签值，下拉框就以value值作为备选项。select返回值是选中的那个value值。（value值为Id）

<pre>
    {{searchMessage.projectId}}
</pre>
<div>
   <b>项目：</b>
   <Select v-model="searchMessage.projectId">
      <Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectId"></Option>
   </Select>
</div>

运行效果：

实例2：没有标签值，下拉框就以value值作为备选项。select返回值是选中的那个value值。（value值为Name）

<pre>
    {{searchMessage.projectId}}
</pre>
<div>
   <b>项目：</b>
   <Select v-model="searchMessage.projectId">
      <Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectName"></Option>
   </Select>
</div>

运行效果：

实例3：有标签值（标签值为Name），下拉框就以标签值作为备选项。select返回值是选中的那个value值。（value值为Id）

<pre>
    {{searchMessage.projectId}}
</pre>
<div>
   <b>项目：</b>
   <Select v-model="searchMessage.projectId">
      <Option v-for="project in managedProjects" :key="project.projectId" :value="project.projectId">{{project.projectName}}</Option>
   </Select>
</div>

运行效果：

总结：

实际情况中通常使用第三个实例。因为，首先，首先，首先（最强硬的需求），我们希望select控件返回Id，因此value值写Id。同时，希望下拉框在UI显示上用Name（汉字），因此需要给定标签值，标签值为汉字。（若不给定标签值，就会使用value值做备选项，但用ID做value值是最强硬的需求）