选择框(select)添加或者减少选项(option)操作的js代码如下所示:
function changeToSelect()
{
var selected = document.forms[0].enterTypesSelected;
var noSelected = document.forms[0].enterTypesNOSelect;
var selectedColl = selected.options;
var noSelectedColl = noSelected.options;
var enterTypes = document.forms[0].enterTypes.value;
var tLen = noSelectedColl.selectedIndex;
if(tLen > -1)
{
var tValue = noSelectedColl.options[tLen].value;
var tText = noSelectedColl.options[tLen].text;
addOption(selectedColl,tValue,tText);
removeOption(noSelectedColl,tLen);
}
else
{
alert("请从类别列表中选择类别!");
return;
}
}
function changeToNoSelect()
{
var selected = document.forms[0].enterTypesSelected;
var noSelected = document.forms[0].enterTypesNOSelect;
var selectedColl = selected.options;
var noSelectedColl = noSelected.options;
var tLen = selected.selectedIndex;
if(tLen > -1)
{
var tValue = selected.options[tLen].value;
var tText = selected.options[tLen].text;
addOption(noSelectedColl,tValue,tText);
removeOption(selectedColl,tLen);
}
else
{
alert("请从类别列表中选择类别!");
return;
}
}
function addOption(colls,value,text)
{
colls.add(createOption(text,value));
colls.selectedIndex = colls.selectedIndex.length-1;
}
function createOption(text,value)
{
return new Option(text,value);
}
function removeOption(colls,index)
{
if(index >-1)
{
colls.remove(index);
colls.selectedIndex = colls.selectedIndex.length-1;
}
}
页面HTML代码如下所示:
<table width="65%" border="0" cellspacing="0" cellpadding="0">
<tr class="tdbg">
<td height="22" width="37%" bgcolor="#FFFFFF" class="PL6"><strong>
待选择类别:</strong></td>
<td width="14%" bgcolor="#FFFFFF"> </td>
<td width="49%" bgcolor="#FFFFFF" class="PL6"><strong>已选中类别:</strong></td>
</tr>
<tr class="tdbg">
<td bgcolor="#FFFFFF">
<select name="enterTypesNOSelect" multiple style="width:150px;overflow:auto" size="5">
<option value="2">物业子系统</option>
<option value="3">商家子系统</option>
<option value="4">管委会子系统</option>
<option value="5">商会子系统</option>
</select>
</td>
<td bgcolor="#FFFFFF"><a href="#" onClick="changeToSelect()"><img src="images/icon/icon_add_toselected.gif" border="0"></a>
<p><a href="#" onClick="changeToNoSelect()"><img src="images/icon/icon_add_toselect.gif" border="0"></a></td>
<td height="22" nowrap bgcolor="#FFFFFF">
<select name="enterTypesSelected" multiple style="width:150px;overflow:auto" size="5">
<option value="1">企业子系统</option>
</select>
</td>
</tr>
</table>
页面的最终效果如下所示:
分享到:
相关推荐
Select2Buttons是一个能将网页中的select选择框转换成一组按钮的插件。 主要功能特点: 转换select选择框为标签式按钮 支持js回发调用 支持disabled选项 支持将多个select设置为一组 支持取消默认...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动! 运行效果图:...
1. 当select输入框中每输入一点内容的时候,在option中找出与内容匹配的选项显示在option的前面选项中。 2. 如何获取每次输入的内容,当keyup的时候触发函数。 问题:select标签中可以输入内容吗?(解决:另一篇文章...
给bootstarp下拉多选框进行赋值、清空、清除下拉之前选中的勾---调试页面,发现bootstarp框架多选会自带一个span标签,清空与赋值就是把这个span标签重置,在浏览器调试页面中找到这个span标签,通过class选择器,对...
这个方法主要用于触发,选择框内容改变时间 实现代码: <!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="test(event)"&...
select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动!
Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。 这个很好解决: 如下: <select class=form-control onchange=selectOnchang(this)> <option>所有申请商家</...
AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项。 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,...
有关javascript 获取checkbox复选框的实例数不胜数。 js实现: var form = document.getElementById("form2"); var field = form.elements["test2"]; var option = Dining.getSelectedOption(form, field); var ...
近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码: 代码如下: <select onchange=”isSelected(this...看下面javascript代码: 代码如下: function isSele
<select></select>标签是选项标签,里面加入option可以作为选项 2.1.3框架和框架集<frameset>` 二.css 1.这个用来设置标签样式有好处 采用外部样式设置页面一来可以减少代码的瘫肿;二来可以时开发页面分离,...
项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多...
JavaScript:定义行为和动作 (基于对象和事件驱动的客户端脚本语言;也是一种广泛应用于客户端Web开发的脚本语言) 基于对象:网页中的一切元素都是假象!不需要new,即可直接使用 事件驱动:JavaScript的执行都是...
并给我们讲解了很多关于如何去学习DOM的方法,觉得真的是受益匪浅啊.下面就几个我觉得比较好的例子和大家分享一下。 1.二级连动下拉菜单(一级是... <option>–选择省份–</option> <option>北京</option> <optio
它支持搜索,并且能直接影响原始的选择框,而原始的选择框是用作数据容器。通过该下拉列表框插件可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。 效果展示 源码下载 使用方法 使用...
option具有类richopt的option时显示rich选项,显示对应的具有相同类的元素。 请注意,当前代码仅支持一种此类选项。 您可以通过将 jQuery 选择器传递给$.richopt()函数来创建自定义小部件。 该函数支持另外两个可选...
3、class :引用 类选择器时使用(CSS中) 4、style :定义 内联方式方式使用(CSS中) 4、注释 语法:<!-- --> 注意: 1、注释不能嵌套 2、注释不能出现在标记中 3、HTML 文档结构 W3C :Word Wide Web ...
实例038 动态输出JavaScript代码 69 实例039 当数字遇到了字符串 70 实例040 PHP程序员的基础——变量的应用 72 实例041 打印系统环境变量信息print_r($_ENV) 73 实例042 使用可变变量输出“I Like PHP!” 73 实例...