この記事では、JavaScript に詳しくない人向けに、JavaScript と select に関する最も基本的なメソッドを中心に説明します。よくあるのは、フォーム構造を提案する人は、プログラムのロジックを設計してデータ構造を作成するだけでなく、フォームのスタイルを設計し、JavaScript に精通している必要があるということです。 Photoshop で: 最初は、私たちは皆、オールラウンダーでありましょう。
以下はこの例の基礎です。これは標準的な形式ではありません。
<form id="f">
<select size="1" name="s">
<option value="VeVB.COm">Wulin.com</option>
<option value="baidu.com">百度</option>
</選択>
</form>
-------------------------------------------------- ------------------------
次のようにコードをコピーします。
<script type="text/javascript">
<!--
var f = document.getElementById("f");
//選択リストの項目数を取得する
document.write(fsoptions.length);
document.write(fslength);
//現在選択されている項目の添字（0から始まる）（方法は2つあります）
//複数の項目が選択されている場合は、最初に選択された項目の添え字を返します
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("追加テキスト", "追加値");
//項目を変更する
fsoptions[1] = new Option("変更されたテキスト", "変更された値");
//アイテムのテキストと値を直接設定することもできます
//-->
</script>
// リスト内のすべての項目を選択します
関数 SelectAllOption(リスト)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = true;
}
}
//VeVB.COm ASP 学習ネットワークによるリスト内の項目の選択を反転します
functionDeSelectOptions(リスト)
{
for (var i=0; i<list.options.length; i++)
{
list.options[i].selected = !list.options[i].selected;
}
}
// リスト内で選択されている項目の数を返します
関数 GetSelectedOptionsCnt(リスト)
{
var cnt = 0;
変数 i = 0;
for (i=0; i<list.options.length; i++)
{
if (list.options[i].selected)
{
cnt++;
}
}
cntを返します。
}
//リストをクリアする
関数 ClearList(リスト)
{
while (list.options.length > 0)
{
list.options[0] = null;
}
}
//選択した項目をリストから削除します
//削除されたアイテムの数を返す
関数 DelSelectedOptions(リスト)
{
変数 i = 0;
var deleteCnt = 0;
while (i < list.options.length)
{
if (list.options[i].selected)
{
list.options[i] = null;
削除されましたCnt++;
}
それ以外
{
i++;
}
}
削除されたCntを返します。
}
//この関数は対応する項目が存在するかどうかを調べます
//repeatCheck 再現性チェックを行うかどうか
//「v」の場合、値による重複値チェックを行う
//「t」の場合、テキストに基づいて重複値チェックを実行
//「vt」の場合、値とテキストで重複値チェックを行う
//その他の値、再現性チェックなし、false を返す
関数 OptionExists(リスト、optText、optValue、repeatCheck)
{
変数 i = 0;
var find = false;
if (repeatCheck == "v")
{
//値による重複値チェック
for (i=0; i<list.options.length; i++)
{
if (list.options[i].value == optValue)
{
見つける = true;
壊す;
}
}
}
else if (repeatCheck == "t")
{
// テキストによる繰り返しチェック
for (i=0; i<list.options.length; i++)
{
if (list.options[i].text == optText)
{
見つける = true;
壊す;
}
}
}
else if (repeatCheck == "vt")
{
//値とテキストによる重複チェック
for (i=0; i<list.options.length; i++)
{
if ((list.options[i].value == optValue) && (list.options[i].text == optText))
{
見つける = true;
壊す;
}
}
}
検索を返します。
}
//リストに項目を追加します
//list は追加されるリストです
//optText と optValue はそれぞれ項目のテキストと値を表します
//repeatCheck 再現性チェックを実行するかどうか、OptionExists を参照
// 追加が成功した場合は true、失敗した場合は false を返します
関数 AppendOption(リスト、optText、optValue、repeatCheck)
{
if (!OptionExists(list, optText, optValue,repeatCheck))
{
list.options[list.options.length] = 新しいオプション(optText, optValue);
true を返します。
}
それ以外
{
false を返します。
}
}
//項目を挿入
//インデックスの挿入位置。挿入位置 >= リスト内の既存の項目の数の場合、その機能は繰り返しチェックせずに項目を追加するのと同等です。
//optText と optValue はそれぞれ項目のテキストと値を表します
関数 InsertOption(リスト、インデックス、optText、optValue)
{
変数 i = 0;
for (i=list.options.length; i>index; i--)
{
list.options[i] = 新しいオプション(list.options[i-1].text, list.options[i-1].value);
}
list.options[index] = 新しいオプション(optText, optValue);
}
// あるリストから別のリストに項目をエクスポートします
//repeatCheck 再現性チェックを実行するかどうか、OptionExists を参照
//deleteSource 項目がターゲットにインポートされた後、ソース リスト内の項目を削除するかどうか
// 影響を受けるアイテムの数を返す
関数 ListToList(sList、dList、repeatCheck、deleteSource)
{
// 影響を受ける行数
var 行 = 0;
変数 i = 0;
while (i<sList.options.length)
{
if (sList.options[i].selected && AppendOption(dList, sList.options[i].text, sList.options[i].value,repeatCheck))
{
// 正常に追加されました
行++;
if(ソースの削除)
{
//ソースリストから項目を削除
sList.options[i] = null;
}
それ以外
{
i++;
}
}
それ以外
{
i++;
}
}
リターンライン。
}
//選択した項目をリスト内で上に移動します
関数 MoveSelectedOptionsUp(リスト)
{
変数 i = 0;
var 値 = "";
var text = "";
for (i=0; i<(list.options.length-1); i++)
{
if (!list.options[i].selected && list.options[i+1].selected)
{
値 = list.options[i].value;
テキスト = list.options[i].text;
list.options[i] = 新しいオプション(list.options[i+1].text, list.options[i+1].value);
list.options[i].selected = true;
list.options[i+1] = 新しいオプション(テキスト, 値);
}
}
}
//選択した項目をリスト内で下に移動します
関数 MoveSelectedOptionsDown(リスト)
{
変数 i = 0;
var 値 = "";
var text = "";
for (i=list.options.length-1; i>0; i--)
{
//www.VeVB.COM
if (!list.options[i].selected && list.options[i-1].selected)
{
値 = list.options[i].value;
テキスト = list.options[i].text;
list.options[i] = 新しいオプション(list.options[i-1].text, list.options[i-1].value);
list.options[i].selected = true;
list.options[i-1] = 新しいオプション(テキスト, 値);
}
}
}