下拉框 select option 从数据字典中取值

一般前台我们写 select option，其中option中的value都是前台页面写死的。比如：

 

<select id="mySelect">  
    <option value="0">我的包包</option>  
    <option>我的本本</option>  
    <option>我的油油</option>  
    <option>我的担子</option>  
</select>

 

 

最近做一个项目，采用数据字典的方式，其好处就是以后新增选项的时候，只需要在数据库中新增一条数据，而不需要一个页面一个页面的改动。

现在从后台到前台来体现一下代码

 

数据库表：在数据库中新建两种表-- 参数类型表（t_pam_type）---参数值表（t_pam_value），两表通过type字段关联

 

insert into t_pam_type (type,descr,crtTime,updTime) values ('licenceType','许可证类型',to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'),to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'));   
insert into t_pam_value (code,value,type,crtTime,updTime) values ('0','经营保险代理业务许可证','licenceType',to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'),to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'));
insert into t_pam_value (code,value,type,crtTime,updTime) values ('1','保险兼业代理业务许可证','licenceType',to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'),to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'));
insert into t_pam_value (code,value,type,crtTime,updTime) values ('2','经营保险经纪业务许可证','licenceType',to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'),to_char(sysdate, 'yyyy-mm-dd HH24:mi:ss'));

mybatis的xml：

 

 

<mapper namespace="com.chinalife.icp.web.param.dao.ParamDao">
	<!-- 查询数据字典 -->
	<select id="queryParam" parameterType="string" resultType="param">  
		 select * from t_pam_value where type = #{type} order by code
	</select>
</mapper>

services方法：

 

 

/**
 * 查询数据字典
 */
public List<Param> queryParam(String type) {
	return paramDao.queryParam(type);
}

 

前台页面 ：

 

<div class="col-md-6">
	<select class="input-sm form-control" id="condition" name="condition" loadData="condition" defaultValue="0">
	</select>
</div>

/****************加载下拉框 start************************/
$(
	function(){
		loadSelect();
	}
)
/****************加载下拉框 end************************/
	function(){
		loadSelect();
	}
)
/****************加载下拉框 end************************/

js 方法：

 

 

<script type="text/javascript">
    //加载下拉菜单
	function loadSelect(){
		$.each($("select[loadData]"),function(name,value){
			var sel = $(value);
			var defaultValue = sel.attr("defaultValue");//默认值
			$.ajax({
				url : "${rc.contextPath}/param/queryParam.htm",
				type : "post",
				async : false,
				dataType:"json",
				data : {"type" : sel.attr("loadData")},
				success : function(result){
					for (var i=0; i<result.length; i++){
						if(defaultValue && defaultValue == result[i].code){
							sel.append("<option value="+result[i].code+" selected>"+result[i].value);
						}else{
							sel.append("<option value="+result[i].code+">"+result[i].value);
						}
					}
				}
			});
		});
	}
</script>