javascript对下拉列表框(select)的操作实例讲解_Javascript教程-查字典教程网
javascript对下拉列表框(select)的操作实例讲解
javascript对下拉列表框(select)的操作实例讲解
发布时间:2016-12-30 来源:查字典编辑
摘要:这篇文章,主要是关于javascript和select相关的最基本方法,以供不熟悉javascript的人参考。常见的情况是,提出表单结构的...

这篇文章,主要是关于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);

}

}

}

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类