效果:
<tr>
<td>工号选择:</td>
<td width="80%">
<select id="choseWorkNo" name="choseWorkNo" multiple="multiple" style="width:100px;height:100px;" ondblclick="addWorkNo();">
<option value="002">测试2</option>
<option value="003">测试3</option>
<option value="004">测试4</option>
<option value="005">测试5</option>
</select>
<font color="orange">*</font>
</td>
</tr>
<tr>
<td></td>
<td width="80%">
<input type="button" onclick="addWorkNo();" width="60px" value="∨"/>
<input type="button" onclick="deleteWorkNo();" width="100px" value="∧"/>
</td>
</tr>
<tr>
<td>已选工号:</td>
<td width="80%">
<select id="chosedWorkNo" name="chosedWorkNo" multiple="multiple" style="width:100px;height:100px;" ondblclick="deleteWorkNo();">
</select>
<font color="orange">*</font>
</td>
</tr>
function addWorkNo(){
if($("#choseWorkNo option:selected").length>0)
{
$("#choseWorkNo option:selected").each(function(){
$("#chosedWorkNo").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
});
sortMe($("#chosedWorkNo"));
}
else
{
alert("请选择待添加的工号!");
}
}
function deleteWorkNo(){
if($("#chosedWorkNo option:selected").length>0)
{
$("#chosedWorkNo option:selected").each(function(){
$("#choseWorkNo").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option");
$(this).remove();
});
sortMe($("#choseWorkNo"));
}
else
{
alert("请选择待移除的工号!");
}
}
//排序
function sortMe(oSel){
var ln = oSel[0].options.length;
var arr = new Array(); // 这是关键部分
// 将select中的所有option的value值将保存在Array中
for (var i = 0; i < ln; i++)
{
arr[i] = new Array();
// 如果需要对option中的文本排序,可以改为arr[i] = oSel.options[i].text;
arr[i][0] = oSel[0].options[i].value;
arr[i][1] = oSel[0].options[i].text;
}
arr.sort(function(x,y){
return x[0]-y[0];
});
//arr.sort(); // 开始排序
// 清空Select中全部Option
while (ln--)
{
oSel[0].options[ln] = null;
}
// 将排序后的数组重新添加到Select中
for (i = 0; i < arr.length; i++)
{
//文本 数值
oSel[0].add(new Option(arr[i][1], arr[i][0]));
}
}
- 大小: 5.5 KB
分享到:
相关推荐
在网页设计和开发中,"下拉框多选select多选"是一个常见的功能,它允许用户在下拉菜单中选择多个选项,而不仅仅是一个。在HTML中,`<select>`元素通常用于创建这样的下拉菜单,但默认情况下,`<select>`只支持单选。...
总之,"select多选下拉框美化"是一个涉及前端多个领域的任务,需要结合jQuery的动态操作和CSS的样式定制,通过创新的布局和交互设计,为用户提供更优质的使用体验。在实际应用中,开发者还需要根据项目需求和用户...
select多选下拉列表+模糊查询功能,亲测完整,有ASP和HTML样例,代码完整。 <!DOCTYPE html> <title>Insert title here</title> <script src="jquery.min.js"></script> ...
在layui的基础上,把select选择框可更改为多选框,并可进行搜索、筛选值。下拉框内容可物理分页配置、自定义搜索模式(远程搜索)。 存在layui时, 同样也能直接使用xmSelect, 不用必须layui.xmSelect 具有多选上限设置...
原生select实现多选功能
vue-select 多选下拉列表,建议用火狐或者谷歌浏览器打开,低版本IE对vue兼容性不好
"select多选与美化"这个主题关注的是如何在HTML的下拉列表中实现多选功能,并且兼容各种主流浏览器,包括Firefox、Opera、Chrome、Safari以及IE6到IE9。这通常涉及到JavaScript库,特别是jQuery的使用,以及CSS样式...
div 模拟 select 多选 实现还有点bug,望大家一起改正。
在本项目中,我们关注的是 "select" 多选组件的重构,它是一个用于用户从多个选项中选择的交互元素。在 Element UI 中,`el-select` 组件支持单选和多选模式,并允许自定义样式和行为。 重构通常涉及到改进代码结构...
jquery+css+div 实现的模拟select多选 jquery+css+div 实现的模拟select多选
在本文中,我们将深入探讨如何实现一个`select`多选插件。`select`元素是HTML中的一个基础组件,用于创建下拉菜单供用户选择。然而,原生的`select`元素并不支持多选功能,这使得在需要用户可以选择多个选项的场景下...
在某些场景下,我们可能需要使`select`下拉框支持多选,即用户可以同时勾选多个选项。这就是"select下拉框可以多选"这个主题所涵盖的知识点。 首先,要实现`select`下拉框的多选功能,我们需要在`<select>`标签中...
在这个例子中,用户可以勾选一个、两个或全部三个选项。 ### CSS美化 虽然默认的多选下拉菜单在所有浏览器中的样式可能不尽相同,但我们可以使用CSS来统一并增强其外观。例如,我们可以改变边框、背景颜色、字体...
在HTML中,创建一个可多选的下拉框通常涉及到`<select>`元素与`<option>`元素的组合,但为了实现多选功能,我们需要使用`<input type="checkbox">`和自定义的JavaScript或者利用现代浏览器支持的Web组件技术。...
在网页开发中,"select模拟多选下拉"是一个常见的需求,特别是在需要用户选择多个选项时。传统的HTML `<select>` 元素虽然支持`multiple`属性实现多选,但其样式和交互方式往往不能满足现代网页设计的需求。因此,...
其中,“Select多选”插件——layui-select-ext,就是针对下拉选择框的多选功能进行优化和增强的一个杰出实例。 layui-select-ext的核心功能在于提供了一个可多选的下拉框,使得用户在选择数据时不再局限于单个选项...
Layui是一个强大的前端UI框架,它提供了一系列美观且易于使用的组件,包括我们所讨论的多选下拉框。"layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先,我们来看“layui多选下拉框...
angularjs select2 多选, 多选类似autocomplete 查询选择 适用于前端开发者,也适用于程序开发人员 多选可适用很多场景,比如多用户选择等等
多选多select的基本实现思路是使用两个`<select>`标签作为容器,其中一个是用来存放待选择的选项,另一个则用于存放已选择的选项。通常,还会提供一组按钮来控制选项的移动。这些按钮包括“单个移动”(如“>”、“...
在网页设计和开发中,"下拉多选select multiple"是一种常见的交互元素,它允许用户在下拉菜单中选择一个或多个选项。Bootstrap框架提供了一种优雅的方式来实现这样的功能,同时增强了用户体验,尤其是在数据量较大时...