可输入下拉列表框

最新推荐文章于 2020-03-06 16:09:51 发布

最新推荐文章于 2020-03-06 16:09:51 发布 · 162 阅读

Javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个可增强HTML下拉框组件的功能，通过简单的JavaScript脚本实现对标准下拉菜单增加“手工输入”选项。当用户选择“手工输入...”后，下拉框将转换为文本输入框供用户输入自定义选项。


/****************************
	@说明		: 可输入下拉框组件
	@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();
}