jquery 操作 可多选的select下拉框 以下为代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<script src="jquery.js" LANGUAGE="JavaScript"></script>
<SCRIPT LANGUAGE="JavaScript">
$(document).ready(function(){
//添加
$("#add").click(function() {
var dept;
var flag=1;
var depts = $("#deptId option[selected]");
var addDepts = $("#addDept option");
if(addDepts.length==0) {
$.each(depts,function(){
dept = this;
$("#addDept").append("<option value='"+dept.value+"'>"+dept.text+"</option>");
});
}else {
$.each(depts,function(){
flag=0;
dept = this;
$.each(addDepts,function(){
if(dept.value==this.value) {
flag=1;
false;
}
});
if(flag==0) {
$("#addDept").append("<option value='"+dept.value+"'>"+dept.text+"</option>")
}
});
}
});
});
</SCRIPT>
</HEAD>
<BODY>
<select name="select" style="width:150px" id="deptId" size="10" multiple="multiple">
<option value="1">ih99</option>
<option value="2">ih99.com</option>
<option value="3">www.ih99.com</option>
</select>
<button id="add">>></button>
<select name="select2" style="width:150px" id="addDept" multiple="multiple" size="10">
</select>
</BODY>
</HTML>
分享到:
相关推荐
"jQuery插件-多选全选实时搜索下拉框"就是这样一个工具,它结合了多选、全选以及实时搜索的功能,极大地优化了用户在选择项时的操作体验。 **一、jQuery基础知识** jQuery是由John Resig于2006年创建的,它的核心...
本文将深入探讨如何使用 jQuery 来实现一个可多选的下拉框功能,这对于创建交互性强的用户界面非常有用。下面我们将详细讲解实现这个功能的关键步骤和涉及的技术点。 首先,我们需要一个 HTML 结构来定义我们的多选...
通过以上分析,我们可以看出“jquery模拟div多选checkbox下拉框”是一个结合了jQuery、DOM操作、事件处理、CSS定制和数据管理的综合性组件。开发者在使用这个压缩包中的`selectbox`文件时,只需按照提供的API和示例...
通过引入这个插件,我们可以快速地将传统的单选下拉框转化为可多选、可搜索、可自定义样式的下拉框。 在使用过程中,我们需要将下载的压缩包"ehynds-jquery-ui-multiselect-widget-03cc76d"解压,其中包含了插件的...
在HTML中,创建一个可多选的下拉框通常涉及到`<select>`元素与`<option>`元素的组合,但为了实现多选功能,我们需要使用`<input type="checkbox">`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...
在Web开发中,传统的HTML下拉框(`<select>`元素)通常只支持单选,但有时我们可能需要一个可多选的下拉框来提供用户更多的选择灵活性。这篇教程将详细介绍如何利用jQuery库来创建这样一个功能丰富的多选下拉框。 ...
本文将详细介绍如何利用jQuery和`jquery.multiselect.js`插件来创建一个可多选的下拉框。 首先,为了实现这个功能,我们需要引入jQuery库、jQuery UI库以及`jquery.multiselect.js`和相应的CSS文件。在示例代码中,...
这就是"select下拉框可以多选"这个主题所涵盖的知识点。 首先,要实现`select`下拉框的多选功能,我们需要在`<select>`标签中添加一个`multiple`属性。这个属性告诉浏览器用户可以选取多个值。下面是一个基本的多选...
**jQuery多选下拉框插件详解** 在Web开发中,多选下拉框是一种常见的交互元素,它允许用户在一组选项中选择多个值。jQuery作为最流行的JavaScript库之一,提供了许多插件来增强这种用户体验。`jquery.multi-select....
在这个"jQuery 多选下拉框实例"中,我们关注的是如何在HTML的下拉选择框(`<select>`元素)中实现多选功能,并且每个选项前都有一个复选框供用户进行选择。 1. **多选下拉框基础**: - 在HTML中,`<select>`元素...
然而,为了提供更好的用户体验和更丰富的样式,我们通常会使用JavaScript或者一些前端框架(如jQuery、Vue.js、React等)来定制这个多选下拉框。从标题来看,这里的实现可能是一个独立的JavaScript组件。 在描述中...
总的来说,结合jQuery和Bootstrap-select,我们可以创建出具有高级特性的多选下拉框,提供更好的用户体验。在实际开发中,还需要注意兼容性和性能优化,确保在不同设备和浏览器上的良好表现。同时,理解并熟练运用...
在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`<select>`元素通常用于创建这样的下拉菜单,但默认情况下,`<select>`只支持单选。...
在IT界,尤其是在前端开发中,"可多选的下拉框"是一个常见的交互元素,它允许用户在一组预设的选项中选择多个项。这种功能通常被用于表单、设置界面或者过滤器等场景,提高了用户体验并简化了数据输入。在本篇中,...
$("select").multiselect({ checkAllText: "全选", uncheckAllText:"全不选" }); 2.选中项的提示信息,如图中第2部分 selectedText 默认:# selected $("select").multiselect({ selectedText:...
总结,jQuery实现的多选下拉框通过插件如"ehynds-jquery-ui-multiselect-widget",为开发者提供了丰富的功能和高度可定制的样式,提高了网页交互的用户体验。正确地集成和配置这些插件,可以为你的项目增添亮点。
《jQuery.multiselect.js:打造高效多选下拉框选择体验》 在Web开发中,下拉框(Dropdown)是常用的一种交互元素,尤其在需要用户从多个选项中进行选择时。然而,传统的HTML `<select>` 标签在处理大量选项或需要...
3. **模拟多选框**:由于原生的多选select在某些情况下无法完全满足设计需求,我们可以使用HTML和CSS创建一个模拟的多选框。这通常涉及到使用`<ul>`和`<li>`元素来构建列表,每个`<li>`代表一个选项,通过`...
本资源"jquery下拉多选select插件.rar"提供了一个基于jQuery实现的多选下拉框插件,适用于J2EE开发环境,尤其适合那些希望在网页中创建美观且功能强大的下拉选择器的开发者。 首先,让我们深入了解一下jQuery的选择...