`

ComboBox简单开发

 
阅读更多

 

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>

 

  • 大小: 3.2 KB
分享到：
| js获取项目根路径
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C#comboBox简单实例

    关于C#中comboBox控件的简单实例。

    MVVM,Combobox,binding四个简单例子

    MVVM 开发模式下，简单的combobox, Combobox.ItemTemplate,以及dataGrid内嵌Combobox绑定。如果需要在window窗体内运行，需要把 AncestorType={x:Type UserControl}}，改为AncestorType={x:Type Window}}

    Winform中ComboBox控件使用总结

    此为示例程序源码. 其中Form1窗体演示了为ComboBox添加和移除项的使用方法; Form2窗体演示了ComboBox从数据库获取数据源的用法,以及Text、SelectedText...开发环境为vs2008，有一个页面连了一下SQL SERVER的pubs数据库

    C#开发实例大全（基础卷）.软件开发技术联盟(带详细书签) PDF 下载

    实例017 使用算术运算符开发简单计算器 21 实例018 使用“^”运算符对数字进行加密 22 实例019 巧用位移运算符获取汉字编码值 24 实例020 使用条件运算符判断指定年份 是不是闰年 25 实例021 使用流程控制语句报销...

    明日科技C#开发入门及项目实战

    实例018 使用算术运算符开发简单计算器 实例019 使用条件运算符判断指定年份是不是闰年 实例020 使用typeof关键字获取类的内部结构 实例021 巧用位移运算符获取汉字编码值 实例022 使用异或运算符对数字进行加密 第...

    visual c++ 开发宝典 源码

    8.6 组合框(Combobox)控件 8.7 图片(Picture)控件 8.8 列表(ListCtrl)控件 8.8.1 Win32新型控件概述 8.8.2 列表控件的使用 8.8.3 ClistCtrl类的主要成员函数 8.9 树形(TreeCtrl)控件 8.9.1 树形控件的使用 8.9.2 ...

    C# 简单的一个WPF应用程序，涉及到Style,Button,Combobox,ListBox等控件.zip

    C#、WPF使用技巧，实战应用开发小系统参考资料，源码参考。经测试可运行。 详细介绍了一些WPF框架的各种功能和模块，以及如何使用WPF进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者，能够...

    delphi写一个简单控件适合新手学习的例子

    由ComboBox派生，把ComboBox的下拉变为一个Memo 用于想学写控件的朋友学习

    Visual C++2010开发权威指南（共三部分）.part1.rar

    9.5.2 CBrush类简单画刷的实现 429 9.5.3 CBrush类位图画刷的实现 430 9.5.4 透明画刷的实现 431 9.6 小结 433 第10章 Visual C++ 2010 MFC动态函数链接库 434 10.1 动态函数链接库简介 434 10.1.1 什么是动态函数...

    EfsFrame(php开发框架) 2.2.rar

    强大灵活，接口简单实用的表现层（2天学会Extjs开发） •懂Html、简单Js即可快速上手Extjs开发 •无需美工、代码简单，提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可...

    Visual C++2010开发权威指南.part09

    18.4.4 ComboBox控件、ListBox控件 18.4.4 和CheckedListBox控件 682 18.4.5 DateTimePicker控件 684 18.4.6 ErrorProvider组件 685 18.4.7 HelpProvider组件 686 18.4.8 ImageList组件 686 18.4.9 Label控件 686 ...

    EfsFrame(java开发框架) v2.2 源代码.rar

    强大灵活，接口简单实用的表现层（2天学会Extjs开发） •懂Html、简单Js即可快速上手Extjs开发 •无需美工、代码简单，提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可...

    EfsFrame(net开发框架) v2.2 源代码.rar

    强大灵活，接口简单实用的表现层（2天学会Extjs开发） •懂Html、简单Js即可快速上手Extjs开发 •无需美工、代码简单，提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可...

    EfsFrame(php开发框架) v2.2 源代码.rar

    强大灵活，接口简单实用的表现层（2天学会Extjs开发） •懂Html、简单Js即可快速上手Extjs开发 •无需美工、代码简单，提升Web开发4-8倍效率 设计灵活、高效、开源的组件层 •有任何数据库编程基础2天内即可...

    Ext 开发指南 学习资料

    简单易行ArrayReader 8.4.2.2. 灵活轻便JsonReader 8.4.2.3. 久负盛名XmlReader 8.4.3. 相信你知道怎么做加法 8.5. 跟我用json，每天五分钟 8.5.1. Hello 老爸。 8.5.2. 老妈等等，孩子先上场。 8.5.3. 老妈来了，...

Magicbox
Global site tag (gtag.js) - Google Analytics