javascript对下拉列表框(select)的操作实例讲解

这篇文章,主要是关于javascript和select相关的最基本方法,以供不熟悉javascript的人参考。常见的情况是,提出表单结构的人, 不仅仅需要为程序设计逻辑,创建数据结构,还需要设计表单的样式,以及熟悉javascript;某些公司可能会要求您精通photoshop:最初的时候,我们都是全才。

下面是我们例子的基础;这不是一个标准的表单。

<form id="f">
<select size="1" name="s">
<option value="jb51.net">我们</option>
<option value="baidu.com">百度</option>
</select>
</form>

---------------------------------------------------------------------------


代码如下:

<script type="text/javascript">
<!--
var f = document.getElementById("f");

//获得select列表项数目
document.write(f.s.options.length);
document.write(f.s.length);

//当前选中项的下标(从0 开始)(有两种方法)
//如果选择了多项,则返回第一个选中项的下标
document.write(f.s.options.selectedIndex);
document.write(f.s.selectedIndex);

//检测某一项是否被选中
document.write(f.s.options[0].selected);

//获得某一项的值和文字
document.write(f.s.options[0].value);
document.write(f.s.options[1].text);

//删除某一项
f.s.options[1] = null;

//追加一项
f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");

//更改一项
f.s.options[1] = new Option("更改的text", "更改的value");
//也可以直接设置该项的 text 和 value
//-->
</script>

//全选列表中的项
function SelectAllOption(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}

//反选列表中的项 by jb51.net asp学习网
function DeSelectOptions(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}

//返回列表中选择项数目
function GetSelectedOptionsCnt(list)
{
var cnt = 0;
var i = 0;
for (i=0; i<list.options.length; i++)
{
if (list.options[i].selected)
{
cnt++;
}
}

return cnt;
}

//清空列表
function ClearList(list)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}

//删除列表选中项
//返回删除项的数量
function DelSelectedOptions(list)
{
var i = 0;
var deletedCnt = 0;
while (i < list.options.length)
{
if (list.options[i].selected)
{
list.options[i] = null;
deletedCnt++;
}
else
{
i++;
}
}

return deletedCnt;
}
//此函数查找相应的项是否存在
//repeatCheck是否进行重复性检查
//若为"v",按值进行重复值检查
//若为"t",按文字进行重复值检查
//若为"vt",按值和文字进行重复值检查
//其它值,不进行重复性检查,返回false
function OptionExists(list, optText, optValue, repeatCheck)
{
var i = 0;
var find = false;

if (repeatCheck == "v")
{
//按值进行重复值检查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].value == optValue)
{
find = true;
break;
}
}
}
else if (repeatCheck == "t")
{
//按文字进行重复检查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//按值和文字进行重复检查
for (i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
find = true;
break;
}
}
}

return find;
}

//向列表中追加一个项
//list 是要追加的列表
//optText 和 optValue 分别表示项的文字和值
//repeatCheck 是否进行重复性检查,参见 OptionExists
//添加成功返回 true,失败返回 false
function AppendOption(list, optText, optValue, repeatCheck)
{
if (!OptionExists(list, optText, optValue, repeatCheck))
{
list.options[list.options.length] = new Option(optText, optValue);
return true;
}
else
{
return false;
}
}

//插入项
//index 插入位置,当插入位置 >= 列表现有项数量时,其作用相当于不进行重复检查的追加项
//optText 和 optValue 分别表示项的文字和值
function InsertOption(list, index, optText, optValue)
{
var i = 0;
for (i=list.options.length; i>index; i--)
{
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
}

list.options[index] = new Option(optText, optValue);
}
//将一个列表中的项导到另一个列表中
//repeatCheck是否进行重复性检查,参见OptionExists
//deleteSource项导到目标后,是否删除源列表中的项
//返回影响的项数量
function ListToList(sList, dList, repeatCheck, deleteSource)
{
//所影响的行数
var lines = 0;
var i = 0;
while (i<sList.options.length)
{
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value, repeatCheck))
{
//添加成功
lines++;
if (deleteSource)
{
//删除源列表中的项
sList.options[i] = null;
}
else
{
i++;
}
}
else
{
i++;
}
}

return lines;
}

//列表中选中项上移
function MoveSelectedOptionsUp(list)
{
var i = 0;
var value = "";
var text = "";
for (i=0; i<(list.options.length-1); i++)
{
if (!list.options[i].selected && list.options[i+1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i+1].text, list.options[i+1].value);
list.options[i].selected = true;
list.options[i+1] = new Option(text, value);
}
}
}

//列表中选中项下移
function MoveSelectedOptionsDown(list)
{
var i = 0;
var value = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{

//www.jb51.net
if (!list.options[i].selected && list.options[i-1].selected)
{
value = list.options[i].value;
text = list.options[i].text;
list.options[i] = new Option(list.options[i-1].text, list.options[i-1].value);
list.options[i].selected = true;
list.options[i-1] = new Option(text, value);
}
}
}

(0)

相关推荐

  • JavaScript如何实现组合列表框中元素移动效果

    首先给大家说下组合框和列表框的区别: 组合框包括列表框和文本框的功能 文本框:只能输入数据 列表框:只能选择数据 组合框:既能输入数据,又能选择`` 应用背景:在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框 . 实现的基本思想: (1)编写init方法对两个列表框进行初始化: (2)为body添加onload事件调用init方法: (3)编写move(s1,s2)把s1中选中的选项移到s2; (4)编写moveAll(s1,s2)把s1中所有的选项都移到s2. (5)为按钮添

  • js操纵dom生成下拉列表框的方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • Javascript调用XML制作连动下拉列表框

    传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascript函数循环写入下拉框中.这种方法不适用于下拉框内容经常改变的情况.因为数据源和javascript程序写死在同一页面. <html><head><title>List</title><meta http-equiv="Content-Type" content="text/html

  • JS 动态添加列表框项效果代码

    *请选择1-3个知识点. 1213123123 2123123123 3213123213 4123213213 5213123213 6213123213 var addTo = document.getElementById("addto"); var moveBack = document.getElementById("moveback"); var selectLeft = document.getElementById("selectleft&

  • js获取下拉列表框<option>中的value和text的值示例代码

    在编程过程中,我们对下拉列表框的取值很多时候都是获取option中的value,但是也有需要获取显示在页面中的值的时候,例如想获得<option value="value">ShowText</option>中"ShowText",我们该如何获取呢?方法很简单,具体代码如下: 复制代码 代码如下: <script type="text/javascript">function a(object){alert(o

  • js Select下拉列表框进行多选、移除、交换内容的具体实现方法

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><span class='wp_keywordlink_affiliate'><a href="tag/html" title="查看 html

  • javascript获取下拉列表框当中的文本值示例代码

    近日碰到一个问题,就是需要将用户点击下拉列表当中某个选项后,将其所选的内容保存起来,例如下面的HTML代码: 复制代码 代码如下: <select onchange="isSelected(this.value);" id="city"> <option value="1">北京</option> <option value="2" >上海</option> <

  • ExtJs之带图片的下拉列表框插件

    在ExtJs的官方网站上有一个带图片的下拉列表,其中扩展了ExtJs的Combo,名称叫做IconCombox,官方地址为:     http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese     但是这个IconComboBox有个缺点,就是显示的图片不能按比例变化.如果图片太大,就会出现覆盖了Combobox中的字,或者出现Icon显示不全种种问题,后来读了IconComboBox的源代码,修改了其中的问题:     在

  • ExtJS中设置下拉列表框不可编辑的方法

    ExtJS这个框架,并没有学习和用过,只知道是一个流行的前段框架,和Easy UI,BUI,DWZ等这些框架都是差不多的,只不过比他们更加强大而已,之所以写这个,我觉得还是很有帮助的. 今天朋友遇到了一个问题:ExtJS中的下拉列表如何设置不可编辑的,html中是不可以编辑的,但是现在这种UI框架中的下拉列表框都是可以编辑的,朋友的需求就是像html中的那样效果,所以朋友想到了用editable属性,但是写了这个属性之后就报错了,当时并没有看错误,我给他找了1个属性设置为不可编辑的,但是还是不好

  • extjs 列表框(multiselect)的动态添加列表项的方法

    因为它这个是创建时自动加载的ArrayStore(关键字是:data: ds),没有动态增加的示例,但我们的项目需要有三个列表框,并且后两个的内容要根据第一个列表框内容动态的加载,因此要在选择第一个列表框的内容时,动态填充后两个的内容.我比较佩服exjts的示例写作人员,这些应该在示例中体现的功能,他们都没有写到,包括之前的2.2版本的示例,网上也没有搜索到,害我找了一天如何动态控制列表数据的功能.首先说明一下,我的方法也不是官方的方法,只是自己灵机一动想到的,下面是动态增加列表项的方法. 在方

随机推荐