【基础】【前端】 HTML Select 框怎么做预选值

如果是普通的 option 的值， 是这样做 的

<div class="layui-inline" style="width:260px">
	<label for="" class="layui-form-label" style="display:">机器种类:</label>
		<div class="layui-input-block" style="width:189px">
		<select id="server_mode" type="text" name="server_mode" value="${map.server_mode}" style="width: 140px;" class="required">
			<option value='test machine' ${yfSql.server_mode eq 'test machine'? 'selected':'' }>测试机</option>
			<option value='formal machine' ${yfSql.server_mode eq 'formal machine'? 'selected':'' }>正式机</option>
		</select>
		</div>
</div>

 

在  <select> 标签 中传入 value ，value 即是 预选值。

<option >标签 也传入 自己的值， 然后使用    jstl 标签 ，将option 的值 和传入的值进行比较，如果 比较成功，就设置为selected，在这里，option还是制定好的。

 

 

如果是 数据字典传入的

<select name="operatingSystem">
	<c:forEach items="${operatingSystems}" var="operatingSystem">
		<option value="${operatingSystem}" ${yfSql.operatingSystem eq operatingSystem ? 'selected':'' }>${operatingSystem}</option>
	</c:forEach>
</select>

也是用 jstl标签

option 标签不再 定具体的值了，select 由name 标签指定传入 的事那个字段，${operatingSystems} 则代表 数据字典的 选项，yfSql.operatingSystem则代表 数据库中的具体指，这样就做到 数据字典传入的时候也 能预选。

 

那后端需要做什么呢，后端需要查询数据字典、查询这个对象，然后一起传入就行。