vue下拉框获取数据库数据显示？

一般情况下是前端通过调取后端接口，来获取到数据库的数据，后端哪里会把数据库的数据整理成一般是json形式的数据，前端获取到数据后，写上select标签，用v-for来循环option标签，然后点击下拉框就能看到下拉框中的数据选项了。点击下拉框再去过去数据的话交互不好。还有一种是元数据库的 *** 作，据说是前端直接调用数据库，不过用的不多。

两种方法：

1. 绑定数据源：

comboBox1.DataSource=ds.Tables[0]comboBox1.DisplayMenber="<a href="https://www.baidu.com/s?wd=%E5%AD%97%E6%AE%B5%E5%90%8D&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLPH-hmvckuHI9mHu-PADs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En10LPW01PHD4" target="_blank" class="baidu-highlight">字段名</a>"comboBox1.Text="<a href="https://www.baidu.com/s?wd=%E5%88%9D%E5%A7%8B%E5%8C%96&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLPH-hmvckuHI9mHu-PADs0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3En10LPW01PHD4" target="_blank" class="baidu-highlight">初始化</a>值"

2. 添加删除记录方法：

//添加for(int i=0i<list.Counti++){ comboBox1.Items.Add(list[i])} //删除comboBox1.Items.RemoveAt(Index)

jsp中把数据库全量查询后填充select列表：

举例说明：

<table>

<tr>

<td width="400px" align="left">入学批次：<SELECT NAME="grade"

id="grade" onchange="refreshEduLevelAndSpecialAjax()"> //选择入学批次会刷新层次和专业

<OPTION VALUE="0">

--请选择--

<c:forEach items="${gradeInfo}" var="gradeInfo">

<OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}

</c:forEach>

</SELECT></td>

<td width="400px" align="left">统考课程：<SELECT

NAME="uniExamCourseId" id="uniExamCourseId">

<OPTION VALUE="0">

--请选择--

<c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">

<OPTION VALUE="${uniExamCourse.id}">${uniExamCourse.uniExamCourseName}

</c:forEach>

</SELECT></td>

</tr>

<tr>

<td colspan="2" id="refreshEduLevelAndSpecialAjax"> //设置ID，用于填充层次和专业的下拉框

<table>

<tr>

<td width="400" align="left">层 次：<SELECT

NAME="eduLevelId" id="eduLevelId"

onchange="refreshSpecialAjax()"> //选择层次后刷新专业

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${educationLevel}" var="educationLevel">

<OPTION VALUE="${educationLevel.id}">${educationLevel.educationLevelName}

</c:forEach>

</SELECT></td>

<td width="400" align="left" id="refreshSpecialAjax">专业：<SELECT//设置ID，用于填充专业的下拉框

NAME="specialId" id="specialId">

<OPTION VALUE="0">--请选择--</OPTION>

<c:forEach items="${specialList}" var="special">

<OPTION VALUE="${special.id}">${special.specialName}

</c:forEach>

</SELECT></td>

</tr>

</table>

</td>

</tr>

</table>

java后台通过dao接口获取specialList的值，并且保存到session即可。

---