首頁 > web前端 > js教程 > 主體

javascript對下拉列錶框(select)的操作實例講解_javascript技巧

WBOY
發布: 2016-05-16 17:11:53
原創
1250 人瀏覽過

這篇文章,主要是關於javascript和select相關的最基本方法,以供不熟悉javascript的人參考。常見的情況是,提出表單結構的人, 不僅僅需要為程式設計邏輯,創建資料結構,還需要設計表單的樣式,以及熟悉javascript;某些公司可能會要求您精通photoshop:最初的時候,我們都是全才。

以下是我們例子的基礎;這不是一個標準的表單。



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

複製程式碼 程式碼如下:


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


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


//返回列表中选择项数目
function GetSelectedOptionsCnt(list)
{
var cnt = 0;
var i = 0;
for (i=0; 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{
if (list.options[i].value == optValue)
{
find = true;
break;
}
}
}
else if (repeatCheck == "t")
{
//按文字进行重复检查
for (i=0; i{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//按值和文字进行重复检查
for (i=0; 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{
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{
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);
}
}
}

 

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板