這篇文章，主要是關於javascript和select相關的最基本方法，以供不熟悉javascript的人參考。常見的情況是，提出表單結構的人， 不僅僅需要為程式設計邏輯，創建資料結構，還需要設計表單的樣式，以及熟悉javascript；某些公司可能會要求您精通photoshop：最初的時候，我們都是全才。
以下是我們例子的基礎；這不是一個標準的表單。
<form id="f">
<select size="1" name="s">
<option value="VeVB.COm">武林網</option>
<option value="baidu.com">百度</option>
</select>
</form>
-------------------------------------------------- -------------------------
複製代碼代碼如下:
<script type="text/javascript">
<!--
var f = document.getElementById("f");
//取得select列表項數目
document.write(fsoptions.length);
document.write(fslength);
//目前選取項目的下標(從0 開始)（有兩種方法）
//如果選擇了多項，則傳回第一個選取項目的下標
document.write(fsoptions.selectedIndex);
document.write(fsselectedIndex);
//偵測某一項是否被選中
document.write(fsoptions[0].selected);
//取得某一項的值和文字
document.write(fsoptions[0].value);
document.write(fsoptions[1].text);
//刪除某一項
fsoptions[1] = null;
//追加一項
fsoptions[fsoptions.length] = new Option("追加的text", "追加的value");
//更改一項
fsoptions[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 VeVB.COm 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.VeVB.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);
}
}
}