ComboBox简单开发

黎豆子

2014-01-19

1.原理

不多讲了：div 显示+input 及显示项与js 数据对像的使用

2.代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery.min.js"></script>
<style type="text/css">
.item {
    margin:0px;
	padding:3px;
}
.item:hover,.item_selected{
  background-color:#ff00ff;
}
</style>

<script type="text/javascript">

/**
 * 
 * 组件值对象
 * Combobox值对名胜
 * formObjId hidden 用户表单提交值对象ID
 * value <option value="">所选择对象的值
 * text <option>text</option> 所选择对象显示内容
 * itemId 所选项目id
 * 
 */
function ComboxVoObj(formObjId,value,text,itemId) {
	this.formObjId = formObjId;
	this.value = value;
	this.text = text;
	this.itemId = itemId;
}
 
 
var combobox_zk = "combobox_zk";
var clazzCombox = "select_combobox";

/**
 * 初始化数据
 */
function comboboxInitData() {
	//解析页面中存在的数据select 数据
	$("." + combobox_zk).each(function(){
		//隐式存值input 对象Id
		var hidId = $(this).attr("name") + "_hidden";
		//加载页面初始数据并存入Combobox容器中
		var index = 0;
		$(this).find("option").each(function(){
			var comboxVoObj = new ComboxVoObj(hidId,$(this).val(),$(this).text(),"combox_item_" + (index + 1));
			comboboxStore[index++] = comboxVoObj;
		});
	});
	//显示对应的combobox[区域]
	var select_combox = $("#" + clazzCombox + "_show_items");
	//清空显示区域内容
	$(select_combox).empty();
	for (var i = 0; i < comboboxStore.length; i++) {
		select_combox.append("<div class=\"select_item\" id=\"" + comboboxStore[i].itemId + "\" style=\"height:20px;\">" + comboboxStore[i].text + "</div>");
	}
	//对显示项添加鼠标移动事件
    $(".select_item").each(function(){
		$(this).hover(
		    function(){
			    $(this).addClass("item_selected");
			},
			function(){
			    $(this).removeClass("item_selected");
			});
	});
}

/**
 * 组件事件添加
 */
function comboboxInitEvent() {
	//添加显示项点击事件
	$(".select_item").click(function(){
		//$(this).addClass("item_selected");
		var item = $(this);
		for (var i  = 0; i < comboboxStore.length; i++) {
			var id = $(item).attr("id");
			var storeItem = comboboxStore[i];
			//判断当	前ID是否与存储内容相等
			if (id == storeItem.itemId) {
				$("#" + storeItem.id).val(storeItem.value);
				//显示选择输出值 
				$("#" + clazzCombox + "_show_input").val(storeItem.text);
				$("#" + clazzCombox + "_hidden").val(storeItem.value);
			}
		}
		$("#" + clazzCombox + "_show_bar").hide();
	});
	
	$("#" + clazzCombox + "_show_input").click(function(){
		$("#" + clazzCombox + "_show_bar").show();
	});
}


 //Combobox数据存储容器
var comboboxStore = new Array();
jQuery(function($){
	
	/**
	//解析页面中存在的数据select 数据
	$("." + combobox_zk).each(function(){
		//隐式存值input 对象Id
		var hidId = $(this).attr("name") + "_hidden";
		//加载页面初始数据并存入Combobox容器中
		var index = 0;
		$(this).find("option").each(function(){
			var comboxVoObj = new ComboxVoObj(hidId,$(this).val(),$(this).text(),"combox_item_" + (index + 1));
			comboboxStore[index++] = comboxVoObj;
		});
	});
	//显示对应的combobox[区域]
	var select_combox = $("#" + clazzCombox + "_show_items");
	//清空显示区域内容
	$(select_combox).empty();
	for (var i = 0; i < comboboxStore.length; i++) {
		select_combox.append("<div class=\"select_item\" id=\"" + comboboxStore[i].itemId + "\" style=\"height:20px;\">" + comboboxStore[i].text + "</div>");
	}
	//对显示项添加鼠标移动事件
    $(".select_item").each(function(){
		$(this).hover(
		    function(){
			    $(this).addClass("item_selected");
			},
			function(){
			    $(this).removeClass("item_selected");
			});
	});
	**/
	comboboxInitData();
	comboboxInitEvent();
	/**
	//添加显示项点击事件
	$(".select_item").click(function(){
		//$(this).addClass("item_selected");
		var item = $(this);
		for (var i  = 0; i < comboboxStore.length; i++) {
			var id = $(item).attr("id");
			var storeItem = comboboxStore[i];
			//判断当	前ID是否与存储内容相等
			if (id == storeItem.itemId) {
				$("#" + storeItem.id).val(storeItem.value);
				//显示选择输出值 
				$("#" + clazzCombox + "_show_input").val(storeItem.text);
				$("#" + clazzCombox + "_hidden").val(storeItem.value);
			}
		}
		$("#" + clazzCombox + "_show_bar").hide();
	});
	
	$("#" + clazzCombox + "_show_input").click(function(){
		$("#" + clazzCombox + "_show_bar").show();
	});
	**/
	
    var showValue = $("." + combobox_zk).find("option:selected").text();
	$("#" + clazzCombox + "_show_input").val(showValue);
	$("#" + clazzCombox + "_hidden").val($(".combobox_zk").val());
	
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<br/>
<br/>
<br/>

<select class="combobox_zk" style="display:none;" name="select_combobox">
    <option value="1">用户1</option>
    <option value="2">用户2</option>
    <option value="3" selected="selected">用户3</option>
    <option value="4">用户4</option>
    <option value="5">用户5</option>
    <option value="6">用户6</option>
    <option value="7">用户7</option>
</select>

<span style="width:220px;height:26px;border:1px solid #95B8E7;overflow:hidden;background-color: #ffffff;display:inline-block;">
    <input type="text" class="select_combox" id="select_combobox_show_input" style="width:200px;border:0px;height:26px;margin:0px;padding:0px;" />
    <span>V</span>
	<input type="hidden" name="state" id="select_combobox_hidden">
	<div style="position:absolute;z-index:9001;display:none;width:220px;overflow:hidden;background-color: #ffffff;" id="select_combobox_show_bar">
	    <div style="height:120px;width:220px; border:1px solid #95B8E7;margin:0px;padding:0px;overflow:auto;" id="select_combobox_show_items">
		</div>
	</div>
	
</span>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

</body>
</html>

ComboBox简单开发