Javascript の選択操作の大規模なコレクション_フォームの特殊効果

実はこの本はずっと私のパソコンに入っていたのですが、一度もじっくり読んだことがありませんでした。 JavaScript を正式に学んだことはありませんが、時々インターネットでコードを見つけて修正し、使用しています。注意深く調べてみると、本当に多くのことが得られました。 , 私もJavaScriptが好きなほうです。
さて、本題に入りますが、Textbox、Button、Label などの Form 要素の操作は比較的簡単だと本で見ましたが、Select を見るともう少し複雑でした。それでじっくり勉強したいと思ったので、この記事を書きました。選択操作には動的な追加、削除、移動、選択項目の値の取得、並べ替えなどがあり、一つずつ説明していきます。
1. 選択するオプションを追加します

コードをコピーします コードは次のとおりです:

//IE のみ、FF は Add メソッドをサポートしていません
function fnAddItem(text,value)
{
var selTarget = document.getElementById("selID"); >selTarget.Add( new Option("text","value"));
}
//IE FF 両方OK
function fnAdd(oListbox, sName, sValue)
{
var oOption = document.createElement("option");
oOption.appendChild(document.createTextNode(sName));
if (arguments.length == 3)
{
oOption.setAttribute( "value", sValue );
oListbox.appendChild(oOption);



2.

コードをコピーします

コードは次のとおりです:function fnRemoveItem() {

var selTarget = document.getElementById("selID ");

if(selTarget.selectedIndex > -1)
{//説明が選択されました
for(var i=0;i{
if(selTarget.options[i].selected)
{
selTarget.remove(i);
i = i - 1;// この行に注目してください
}
}
}
}



3. [選択] のオプションを別のオプションに移動します。

コードをコピーします

コードは次のとおりです: function fnMove(fromSelectID,toSelectID) { var from = document. getElementById(fromSelectID);

var to = document.getElementById(toSelectID);

for(var i=0;i{
if(from.options) [i].selected)
{
to.appendChild(from.options[i]);
i = i - 1;
}
}


if のコードも同様です。 次のコード行を使用して

コードをコピーします

コードvar op = from.options [i]; to.options.add(new Option(op.text, op.value));削除(i);

4. オプションを上下に移動します

コードは次のとおりです。

function fnUp( ) { var sel = document.getElementById("selID"); for(var i) =1; i if(sel.options[i].selected) から直接開始します。 {

if(!sel.options.item(i-1).selected)

{//上記の項目は選択されていません。上下を入れ替えます
var selText = sel.options[ i].text;
var selValue = sel.options[i].value;
sel.options[i ].text = sel.options[i-1].text; i].value = sel.options[i-1].value;
sel.options[i].selected = false;
sel.options[i-1].text =
sel; .options[i-1].value = selValue;
sel.options[i-1].selected=true;
}
}


上下の項目を入れ替える場合、以下のコードを使用することもできますが、Dom Any操作のたびにページ全体の再レイアウトが発生するため効率が非常に悪いため、属性値を変更した方が良いです要素を直接指定します。




コードをコピー


コードは次のとおりです:

var oOption = sel.options[i]
var oPrevOption = sel.options[i-1]
sel.insertBefore(oOption,oPrevOption);

下に移動するのと同じ

コードをコピー

コードは次のとおりです:

関数 fnDown()
{
var sel = fnGetTarget("selLeftOrRight");
for(var i=sel.length -2; i >= 0; i-- )
{//下に移動します。最後のものは処理する必要がないため、最後から 2 番目のものから直接開始します
if(sel.options.item(i).selected)
{
if( !sel.options.item(i 1).selected)
{//次のオプションが選択されていないため、上下を入れ替えます
var selText = sel.options.item(i).text ;
var selValue = sel.options.item(i).text = sel.options.item(i 1).text; .item(i).value = sel.options.item(i 1).value;
sel.options.item(i).selected = false; = selText;
sel.options.item(i 1).value = selValue;
}
}
}
}



5. Select のオプションの並べ替え

ここでは、Array オブジェクトの sort メソッドを使用して操作します。ソートに使用されるアルゴリズムはこの関数で定義できます。
array.sort([compareFunction]) CompareFunction は 2 つのパラメーター (p1、p2) を受け入れます。ソート操作の進行中、配列オブジェクトは比較のために毎回 2 つの値を渡す必要があります。整数値: 戻り値が > 0 の場合、p1 は p2 の後にランクされ、戻り値が 例:



コードをコピー

コードは次のとおりです。function fnCompare( a,b) {

if (a < b)

return -1;
if (a > b)
return
}
var arr = new Array();
// arr に値を追加します
arr.sort(fnCompare);
// ここでの並べ替え操作の結果は、arr 内の項目です。小さいものから大きいものへの昇順です。 並べ替え
//fnCompare を
に変更した場合//if (a < b)
// return
//if (a > b) )
// return -1;
//return
// ソートの結果は降順です
次は Select の Option のソートです並べ替えはオプションの値で並べ替えることができますが、テキストで並べ替えることもできます。ここでは値による並べ替えのみを示します。
function sortItem()
{
var sel = document.getElementById("selID") ;
var selLength = sel.options.length;
var arr = new Array();
var arrLength;
for(var i=0; i{
arr[i] = sel.options[i];
}
arrLength = arr.length;
arr.sort(fnSortByValue);// Sort
//最初に元のオプションを削除します。
while(selLength--)
{
sel.options[selLength] = null
}
//ソートされたオプションを元に戻します。 into Select
for(i= 0;i{
fnAdd(sel,arr[i].text,arr[i].value);
//sel. add(new Option(arr[i] .text,arr[i].value));
}
}
function fnSortByValue(a,b)
{
var aComp = a .value.toString();
var bComp = b.value.toString();
if (aComp if (aComp > bComp)
return 1;
return 0 ;
}


たとえば、値が整数または文字列として並べ替えられる場合、結果は異なります。スペースに限りがあるため、これ以上の紹介は不要です。
これらすべての操作をファイルに記述しました。実行時の効果は次のようになります。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。