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`经常与其他控件配合使用，如在数据库查询中作为条件筛选，或者在配置界面中作为设置选项。了解并熟练掌握`comboBox`的使用，能让你的C#应用程序更加易用且功能丰富。 通过这个简单的实例，...
本篇文章将深入探讨如何在C#中实现简单自绘ComboBox。 首先，我们要理解“自绘”（Drawing）的概念。自绘是指程序通过重写控件的Paint事件，手动绘制控件的各个部分，以达到定制外观的效果。对于ComboBox，我们可能...
ComboBox控件在Windows应用程序开发中广泛使用，尤其在创建具有多种选择功能的表单时。 本压缩包文件提供的“CComboBox”可能包含了一个实现ComboBox功能的源代码示例，这对于初学者了解和学习VC++中的ComboBox控件...
本教程将深入探讨如何在C#环境下，利用VS2005为ComboBox添加自动补全或模糊查找功能，这在实际开发中非常实用，能够提升用户体验。 一、自动补全（AutoComplete）原理 自动补全功能基于用户输入的部分文本，快速...
在Windows应用程序开发中，Combobox控件是一种常用的交互元素，它结合了下拉列表和文本输入框的功能。本文将深入探讨在C#中使用Combobox的技巧，包括但不限于数据绑定、自定义项、事件处理以及优化用户体验等方面。 ...
MVVM 开发模式下，简单的combobox, Combobox.ItemTemplate,以及dataGrid内嵌Combobox绑定。如果需要在window窗体内运行，需要把 AncestorType={x:Type UserControl}}，改为AncestorType={x:Type Window}}
在.NET框架下的Windows Forms应用程序开发中，`ComboBox` 控件是非常常用的一个控件，主要用于提供给用户一个下拉列表以供选择。`ComboBox` 控件的数据绑定功能是其核心特性之一，能够帮助开发者轻松地将数据源与...
在Windows Forms开发中，`ComboBox`控件是一个常用的组件，用于提供用户选择一个或多个预定义选项的功能。本文将详细讲解如何实现“去除`ComboBox`边框，改变背景色以及字体颜色”的效果，以满足自定义UI的需求。...
在C# WinForm开发中，Combobox控件是常用的数据展示和选择组件，尤其是在需要用户从大量数据中选择一项时。然而，对于大型数据集，简单的下拉列表可能不足以提供良好的用户体验。这时，模糊查询功能就能派上用场，...
然而，标准的ComboBox通常只支持单列显示，并且其内置的过滤功能较为简单。在某些场景下，我们可能需要自定义ComboBox，使其具备显示多列数据以及根据用户输入进行智能过滤的功能。标题中的"C# ComboBox(winform) ...
除了JSON格式外，还可以直接使用简单的数组来加载`comboBox`。这种方式更加简单直接，适用于数据量较小或不需要复杂数据结构的情况。 示例代码： ```javascript var data = [['1', 'Option 1'], ['2', 'Option 2']]...
组合框（ComboBox）是Windows应用程序开发中常见的控件之一，常用于实现下拉选择功能，让用户在一组预设选项中进行选择。在本教程中，我们将深入探讨组合框的使用，包括其基本概念、功能、常见属性、方法以及在实际...
7. **示例代码**：下面是一个简单的联动ComboBox的示例： ```javascript // 创建第一个ComboBox var combo1 = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '省份', store: provincesStore, ...
在开发过程中，利用ExtJS提供的源码和工具，如Chrome开发者工具或Sencha CMD，可以帮助我们调试和优化代码。对于复杂的应用场景，理解ExtJS的事件机制和数据绑定原则是至关重要的。通过熟练掌握这些知识点，我们可以...
在Windows Forms开发中，`ComboBox`控件是一个常用的组件，用于提供下拉列表让用户选择。然而，标准的`ComboBox`并不直接支持模糊查询功能，即输入部分文本后就能显示出匹配的选项。为了实现这一功能，开发者通常...
4. DropDownStyle：决定ComboBox是作为下拉列表还是简单文本框显示。 ListBox控件则是一个多选列表，用户可以在其中选择一个或多个项目。ListBox控件通常用于展示一组选项，让用户进行多项选择。其关键属性有： 1. ...
在Windows桌面应用开发中，ComboBox是一个不可或缺的控件，它结合了下拉列表和文本框的功能，用户既可以输入文字，也可以从预定义的选项中选择。"c# COMbobox源码"指的是用C#编写的ComboBox控件的原始代码，这通常是...
在默认情况下，ComboBox仅支持简单的文本项，但通过自定义控件和模板，我们可以将其功能扩展到包含更复杂的数据结构。 扩展ComboBox的关键在于自定义控件模板。在WPF中，我们可以通过修改ControlTemplate来改变控件...
组合框（ComboBox）是Windows应用程序开发中常见的控件之一，常用于实现下拉选择功能。在Windows编程领域，如MFC（Microsoft Foundation Classes）或WinAPI中，ComboBox扮演着重要的角色，提供用户友好的交互界面。...
在编程领域，尤其是在Windows应用程序开发中，`ComboBox`和`ListBox`是两种常见的控件，它们用于用户界面中提供下拉列表或多项选择的功能。在本文中，我们将深入探讨这两个控件如何处理和使用内码，以及它们在实际...