select框根据传入值默认选中的公共方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/DWL0208/article/details/82711672

在项目开发中有许多select需要根据传入值默认选中，开发公共的方法就很有必要。

/**
 * @param options
 * initvalue 初始选项
 * dic 字典json
 * value 选择项
 */
$.fn.select = function(options) {
    var select = this;
    if(options.initvalue!=null&&options.initvalue!=''){
        this.append("<option>"+options.initvalue+"</option>");  
    }
	
    var dic = options.dic;
    
    for(key in dic){
        if(key == options.value){
        	select.append("<option value='"+key+"' selected>"+dic[key]+"</option>");
        }else{
        	select.append("<option value='"+key+"'>"+dic[key]+"</option>");
        }
    }
};

$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子：$("#div").abc();

方法写好了我们在HTML页面怎么用呢，很简单如下。写两个select框，option不用写。

<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right" for="form-field-1">数据库类型</label>

			<div class="col-sm-5">
				<select class="form-control" id="dbType" name="dbType">
				</select>
			</div>
		</div>
		<div class="space-4"></div>
		
		<div class="form-group">
			<label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 使用级别 </label>

			<div class="col-sm-5">
				<select class="form-control" id="level" name="level">
				</select>
			</div>
		</div>

调用方法

$(document).ready(function(){
	$("#level").select({
		dic:{"1":"一级","2":"二级","3":"三级"},
		value:'${dbInfo.level}',
		initvalue:"--请选择--"
	});
	$("#dbType").select({
		dic:{"MySQL":"MySQL","Oracle":"Oracle","SQLite":"SQLite",
			"SQLServer":"SQLServer","PostgreSQL":"PostgreSQL"},
		value:'${dbInfo.dbType}',
		initvalue:"--请选择--"
	});
	
});

其中dic 为select框中的option，value为后台传入的值需要选中，initvalue可加也可以不加，无值时显示请选择选项的。

实现效果。