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>