可输入下拉列表框

/****************************
	@说明		: 可输入下拉框组件
	@Date		: 2009-05-16
	
	使用方法：
		<select onmouseover="ConvertToCombSelect(this)" onchange="CombSelectChange(this)">
		</select>
****************************/


/**
 * 给指定下拉框添加"手工输入"功能。
 */
function ConvertToCombSelect(selectObj){
	if(selectObj.id == null || selectObj.id == ''){
		selectObj.id = selectObj.name + "_combId";
	}
	if(selectObj.lastChild.innerText != '手工输入...'){
		var opt = document.createElement("OPTION");
		opt.value = "手工输入...";
		opt.innerText = "手工输入...";
		opt.style.background = "green";
		selectObj.appendChild(opt);
		
		var combSpan = document.createElement("SPAN");
		combSpan.id = "combSelectSpan";
		selectObj.parentNode.appendChild(combSpan);
	}
}


/**
 * onchange事件
 * @param selectObj
 * @return
 */
function CombSelectChange(selectObj){
	if(selectObj.value == '手工输入...'){
		$('combSelectSpan').innerHTML = '<input type="text" id="combSelectText" onblur="CombSelectToSelectMode(\''+selectObj.id+'\',this.value)" class="text" style="display:none;"/>'; 
		
		var modelText = $('combSelectText');
		
		selectObj.style.display = "none";
		modelText.style.display = "block";
		modelText.value = '';
		modelText.focus();
	}
}

//切换到选择
function CombSelectToSelectMode(selectObjId , textValue){
	var selectObj = $(selectObjId);
	var combText = $('combSelectText');
	selectObj.style.display = "block";
	combText.style.display = "none";
	$('combSelectSpan').innerHTML = '';
	
	if(textValue != ''){
		selectObj.removeChild(selectObj.lastChild);
	
		var opt = document.createElement("OPTION");
		opt.value = textValue;
		opt.innerText = textValue;
		opt.selected = true;
		selectObj.appendChild(opt);
		
		var opt = document.createElement("OPTION");
		opt.value = "手工输入...";
		opt.innerText = "手工输入...";
		opt.style.background = "green";
		selectObj.appendChild(opt);
		
	}else{
		selectObj.value = '';
	}
	
	selectObj.focus();
}