javascript對(duì)下拉列表框(select)的操作實(shí)例講解
這篇文章,主要是關(guān)于javascript和select相關(guān)的最基本方法,以供不熟悉javascript的人參考。常見的情況是,提出表單結(jié)構(gòu)的人, 不僅僅需要為程序設(shè)計(jì)邏輯,創(chuàng)建數(shù)據(jù)結(jié)構(gòu),還需要設(shè)計(jì)表單的樣式,以及熟悉javascript;某些公司可能會(huì)要求您精通photoshop:最初的時(shí)候,我們都是全才。
下面是我們例子的基礎(chǔ);這不是一個(gè)標(biāo)準(zhǔn)的表單。
<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列表項(xiàng)數(shù)目
document.write(f.s.options.length);
document.write(f.s.length);
//當(dāng)前選中項(xiàng)的下標(biāo)(從0 開始)(有兩種方法)
//如果選擇了多項(xiàng),則返回第一個(gè)選中項(xiàng)的下標(biāo)
document.write(f.s.options.selectedIndex);
document.write(f.s.selectedIndex);
//檢測某一項(xiàng)是否被選中
document.write(f.s.options[0].selected);
//獲得某一項(xiàng)的值和文字
document.write(f.s.options[0].value);
document.write(f.s.options[1].text);
//刪除某一項(xiàng)
f.s.options[1] = null;
//追加一項(xiàng)
f.s.options[f.s.options.length] = new Option("追加的text", "追加的value");
//更改一項(xiàng)
f.s.options[1] = new Option("更改的text", "更改的value");
//也可以直接設(shè)置該項(xiàng)的 text 和 value
//-->
</script>
//全選列表中的項(xiàng)
function SelectAllOption(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}
//反選列表中的項(xiàng) by jb51.net asp學(xué)習(xí)網(wǎng)
function DeSelectOptions(list)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}
//返回列表中選擇項(xiàng)數(shù)目
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;
}
}
//刪除列表選中項(xiàng)
//返回刪除項(xiàng)的數(shù)量
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;
}
//此函數(shù)查找相應(yīng)的項(xiàng)是否存在
//repeatCheck是否進(jìn)行重復(fù)性檢查
//若為"v",按值進(jìn)行重復(fù)值檢查
//若為"t",按文字進(jìn)行重復(fù)值檢查
//若為"vt",按值和文字進(jìn)行重復(fù)值檢查
//其它值,不進(jìn)行重復(fù)性檢查,返回false
function OptionExists(list, optText, optValue, repeatCheck)
{
var i = 0;
var find = false;
if (repeatCheck == "v")
{
//按值進(jìn)行重復(fù)值檢查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].value == optValue)
{
find = true;
break;
}
}
}
else if (repeatCheck == "t")
{
//按文字進(jìn)行重復(fù)檢查
for (i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
find = true;
break;
}
}
}
else if (repeatCheck == "vt")
{
//按值和文字進(jìn)行重復(fù)檢查
for (i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
find = true;
break;
}
}
}
return find;
}
//向列表中追加一個(gè)項(xiàng)
//list 是要追加的列表
//optText 和 optValue 分別表示項(xiàng)的文字和值
//repeatCheck 是否進(jìn)行重復(fù)性檢查,參見 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;
}
}
//插入項(xiàng)
//index 插入位置,當(dāng)插入位置 >= 列表現(xiàn)有項(xiàng)數(shù)量時(shí),其作用相當(dāng)于不進(jìn)行重復(fù)檢查的追加項(xiàng)
//optText 和 optValue 分別表示項(xiàng)的文字和值
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);
}
//將一個(gè)列表中的項(xiàng)導(dǎo)到另一個(gè)列表中
//repeatCheck是否進(jìn)行重復(fù)性檢查,參見OptionExists
//deleteSource項(xiàng)導(dǎo)到目標(biāo)后,是否刪除源列表中的項(xiàng)
//返回影響的項(xiàng)數(shù)量
function ListToList(sList, dList, repeatCheck, deleteSource)
{
//所影響的行數(shù)
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)
{
//刪除源列表中的項(xiàng)
sList.options[i] = null;
}
else
{
i++;
}
}
else
{
i++;
}
}
return lines;
}
//列表中選中項(xiàng)上移
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);
}
}
}
//列表中選中項(xiàng)下移
function MoveSelectedOptionsDown(list)
{
var i = 0;
var value = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{
//www.dbjr.com.cn
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調(diào)用XML制作連動(dòng)下拉列表框
- JS 動(dòng)態(tài)添加列表框項(xiàng)效果代碼
- extjs 列表框(multiselect)的動(dòng)態(tài)添加列表項(xiàng)的方法
- ExtJs之帶圖片的下拉列表框插件
- javascript獲取下拉列表框當(dāng)中的文本值示例代碼
- js Select下拉列表框進(jìn)行多選、移除、交換內(nèi)容的具體實(shí)現(xiàn)方法
- js獲取下拉列表框<option>中的value和text的值示例代碼
- js操縱dom生成下拉列表框的方法
- ExtJS中設(shè)置下拉列表框不可編輯的方法
- JavaScript如何實(shí)現(xiàn)組合列表框中元素移動(dòng)效果
相關(guān)文章
js貪吃蛇網(wǎng)頁版游戲特效代碼分享(挑戰(zhàn)十關(guān))
這篇文章主要為大家詳細(xì)介紹了js貪吃蛇網(wǎng)頁版游戲特效,游戲總共有十關(guān),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-08-08js中字符串編碼函數(shù)escape()、encodeURI()、encodeURIComponent()區(qū)別詳解
JavaScript中有三個(gè)可以對(duì)字符串編碼的函數(shù),分別是: escape,encodeURI,encodeURIComponent,相應(yīng)3個(gè)解碼函數(shù):unescape,decodeURI,decodeURIComponent 。接下來通過本文給大家介紹三者之家的區(qū)別,感興趣的朋友一起學(xué)習(xí)吧2016-04-04JavaScript實(shí)現(xiàn)垂直向上無縫滾動(dòng)特效代碼
下面小編就為大家?guī)硪黄狫avaScript實(shí)現(xiàn)垂直向上無縫滾動(dòng)特效代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11js實(shí)現(xiàn)可旋轉(zhuǎn)的立方體模型
這里給大家分享的是通過js腳本來控制頁面中的正方體轉(zhuǎn)動(dòng)特效,用戶可以點(diǎn)擊按鈕向右轉(zhuǎn)動(dòng),也可以向下轉(zhuǎn)動(dòng),結(jié)合自己的需求控制即可。效果非常棒,這里推薦給大家2016-10-10JS實(shí)現(xiàn)點(diǎn)擊按鈕自動(dòng)增加一個(gè)單元格的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕自動(dòng)增加一個(gè)單元格的方法,實(shí)例分析了javascript操作表格單元格的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03