下拉列表(输入框与下拉框重叠使用，可输入，可选择)

1、封装函数：

/*
 * input与select重叠使用控件
 * @param {object} obj -- 参数对象
 * 
 * @email [email protected]
 * */
jQuery.setInputSel = function(obj) {
	var optionGroup =  '请选择';
	/*input和select控件的id及类名，若没有创建则默认给予*/
	var inputId = obj.inputId || 'inputId';
	var selectId = obj.selectId || 'selectId';
	var fatherBox = obj.fatherBox || 'sel-inp-box';
	var selectClass = obj.selectClass || 'selectClass';
	var inputClass = obj.inputClass || 'inputClass';
	/*根据数据渲染下拉框*/
	if(obj.optionGroup && obj.optionGroup.length > 0) {
		for(var i = 0; i < obj.optionGroup.length; i++) {
			var optionVal = obj.optionGroup[i].val || '';
			var optionName = obj.optionGroup[i].name || '';
			optionGroup += ''+obj.optionGroup[i].name+'';
		}
	}
	/*渲染select控件，判断是否有传类名(用于渲染样式)*/
	var selectOp = '';
	if(obj.selectClass) {
		selectOp = ''+optionGroup+'';
	}else {
		/*若selectClass在css有编写样式，此处style可为空*/
		selectOp = ''+optionGroup+'';
	}
	/*渲染input控件，判断是否有传类名(用于渲染样式)*/
	var inputOp = '';
	if(obj.inputClass) {
		inputOp = '';
	}else {
		/*若inputClass在css有编写样式，此处style可为空*/
		inputOp = '';
	}
	var op = '
'+selectOp+inputOp
			'
';
	$('#'+obj.parentId).append(op);	
	/*下拉框值选择修改*/
	$('#'+selectId).change(function() {
		$('#'+inputId).val($('#'+selectId+' option:selected').attr('name'));
		$('#'+inputId).attr('data-name',$(this).val());
	});
	/*输入框输入修改*/
	$('#'+inputId).change(function() {
		$('#'+selectId).val($('#'+selectId).val(''));
		$('#'+inputId).attr('data-name','');
	});
}	

2、放置控件父级元素

3、放置input及select的块元素样式 -- sel-inp-box

.sel-inp-box {
	position: relative;
	top: 0;
	left: 0;
	display: inline-block;	
}

 

4、调用：

$(function(){
	/*测试值*/
	var optionGroupData = [{
		name : 'name1',
		val : '12'
	},{
		name : 'name2',
		val : ''
	},{
		name : 'name3',
		val : '14'
	}];
	var obj = {
		optionGroup : optionGroupData,
		parentId : 'dd'
	}
	/*调用*/
	$.setInputSel(obj);
})

5、运行结果

6、获取值（默认input框id为“inputId”）

下拉框显示值：$(''#inputId).val()

下拉框值：$('#inputId').attr('data-name')