這篇文章,主要是關(guān)于javascript和select相關(guān)的最基本方法,以供不熟悉javascript的人參考。常見的情況是,提出表單結(jié)構(gòu)的人, 不僅僅需要為程序設(shè)計邏輯,創(chuàng)建數(shù)據(jù)結(jié)構(gòu),還需要設(shè)計表單的樣式,以及熟悉javascript;某些公司可能會要求您精通photoshop:最初的時候,我們都是全才。
下面是我們例子的基礎(chǔ);這不是一個標準的表單。
<form> 
<select size="1"> 
<option value="vevb.com">腳本之家</option> 
<option value="baidu.com">百度</option> 
</select> 
</form> 
--------------------------------------------------------------------------- 
復(fù)制代碼 代碼如下:
<script type="text/javascript"> 
<!-- 
var f = document.getElementById("f"); 
//獲得select列表項數(shù)目 
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"); 
//也可以直接設(shè)置該項的 text 和 value 
//--> 
</script> 
//全選列表中的項 
function SelectAllOption(list) 
{ 
for (var i=0; i<list.options.length; i++) 
{ 
list.options[i].selected = true; 
} 
} 
//反選列表中的項 by vevb.com 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; 
} 
} 
//返回列表中選擇項數(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; 
} 
} 
//刪除列表選中項 
//返回刪除項的數(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)的項是否存在 
//repeatCheck是否進行重復(fù)性檢查 
//若為"v",按值進行重復(fù)值檢查 
//若為"t",按文字進行重復(fù)值檢查 
//若為"vt",按值和文字進行重復(fù)值檢查 
//其它值,不進行重復(fù)性檢查,返回false 
function OptionExists(list, optText, optValue, repeatCheck) 
{ 
var i = 0; 
var find = false; 
if (repeatCheck == "v") 
{ 
//按值進行重復(fù)值檢查 
for (i=0; i<list.options.length; i++) 
{ 
if (list.options[i].value == optValue) 
{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "t") 
{ 
//按文字進行重復(fù)檢查 
for (i=0; i<list.options.length; i++) 
{ 
if (list.options[i].text == optText) 
{ 
find = true; 
break; 
} 
} 
} 
else if (repeatCheck == "vt") 
{ 
//按值和文字進行重復(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; 
} 
//向列表中追加一個項 
//list 是要追加的列表 
//optText 和 optValue 分別表示項的文字和值 
//repeatCheck 是否進行重復(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; 
} 
} 
//插入項 
//index 插入位置,當插入位置 >= 列表現(xiàn)有項數(shù)量時,其作用相當于不進行重復(fù)檢查的追加項 
//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); 
} 
//將一個列表中的項導(dǎo)到另一個列表中 
//repeatCheck是否進行重復(fù)性檢查,參見OptionExists 
//deleteSource項導(dǎo)到目標后,是否刪除源列表中的項 
//返回影響的項數(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) 
{ 
//刪除源列表中的項 
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--) 
{ 
//m.survivalescaperooms.com 
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); 
} 
} 
} 
新聞熱點
疑難解答
圖片精選