WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:<select> の指定された行を削除する。

0:[投稿] Yachimata [MAIL] [2003/01/22 16:31 ][環境:win98,IE6 わからない]

こんにちは、Yachimataです。
<select> に関して質問があります。

<select> 内の、指定されたある行を行ごと削除する事は出来ないでしょうか。
一つの <option></option> を消去する方法を探しています。

宜しくお願いします。


1:[回答] ごだっち [MAIL] [2003/01/22 16:52 ]

環境依存ではありますが、こんな方法も可能かと。
(Win2k + IE6, Opera7で動作確認。)

window.document.(form名).(select名).options.remove(n);

「n」は、0からはじまるオプションの番号


2:[質問] Yachimata [MAIL] [2003/01/22 18:01 ]

ごだっちさん、ありがとうございます!

お陰様で解決しました。
そこで追加質問させて下さい。

同様に行を追加する事は可能でしょうか。

例えば、コンボの一行目に空白行を追加したい場合などは、どうすれば実現出来るのでしょうか。


3:[回答] ごだっち [MAIL] [2003/01/22 18:50 ]

自分のレベルだと「1行目」に追加するのは結構面倒くさい処理になってしまいますが、
一応、以下のようなソースで可能ではあります。

1) 追加先のオプションの数を取得。
2) オプションの最後から順番に配列に格納し、格納し終わったオプションを削除。
3) 最初のオプションの数プラス1個のオプションを作成。
  このとき、最初に作成する1個は、指定の内容にする。
  2個目以降のオプションは、配列から呼び出して作成する。

<script language="javascript">
<!--
function adspc(){
    var obj = window.document.f.s;
    var opnum = obj.options.length;
    var kpnum = opnum + 1;
    var kpval = new Array();
    var kptxt = new Array();
    for(i=opnum;i>0;i--){
        var j=i-1;
        kpval[i] = obj.options[j].value;
        kptxt[i] = obj.options[j].text;
        obj.options.remove(j);
    }
    for(i=0;kpnum>i;i++){
        var adobj = document.createElement("option");
        if(i==0){
            adobj.value = "none";
            adobj.text = "(space)";
        }
        else{
            adobj.value = kpval[i];
            adobj.text = kptxt[i];
        }
        obj.add(adobj);
    }
    obj.options[0].selected = true;
}

function dlop0(){
    var obj = window.document.f.s;
    obj.options.remove(0);
    obj.options[0].selected = true;
}
//-->
</script>

<form name="f">
<select name="s">
<option value="1st">1</option>
<option value="2nd">2</option>
<option value="3rd">3</option>
<option value="4th">4</option>
</select>
<input type="button" onClick="dlop0();" value="del_option(0)">
<input type="button" onClick="adspc();" value="add_space">
</form>


4:[回答] ween [2003/01/22 21:59 ]

insertBefore, removeChild 等を使えば
Mozilla系UAでも削除・挿入ともに動くようにできると思います。
(Win2K+Moz1.2.1/IE6/Opera7 で確認)。

<script type="text/javascript">
function removeOption ( select, n ) {
 // select の n 行目を削除(n=-1なら最後尾のオプションを削除)
 select.removeChild( n>-1 ? select.options[n] : select.lastChild );
}
function insertOption ( select, n, text, value ) {
 // select の n 行目に挿入(n=-1なら最後尾に追加)
 var newOption = document.createElement('option');
 select.insertBefore( newOption, n>-1 ? select.options[n] : null );
 newOption.text=text||'', newOption.value=value||'';
}
</script>

<form name="f0">
<select name="e0" size="6">
<option>A-----</option><option>B-----</option><option>C-----</option>
</select>
<input type="button" value="先頭に挿入" onclick="insertOption(document.f0.e0, 0, '先頭')" />
<input type="button" value="3行目挿入" onclick="insertOption(document.f0.e0, 2, '3行目')" />
<input type="button" value="末尾に挿入" onclick="insertOption(document.f0.e0,-1, '末尾')" />
<input type="button" value="先頭を削除" onclick="removeOption(document.f0.e0, 0)" />
<input type="button" value="2行目削除" onclick="removeOption(document.f0.e0, 1)" />
<input type="button" value="末尾を削除" onclick="removeOption(document.f0.e0, -1)"/>
</form>


5:[完了] Yachimata [MAIL] [2003/01/23 09:08 ]

ごだっちさん、weenさん、
回答有難う御座います!!

提示していただいた方法は、いわゆる『DHTML』ですよね。
これを機会に勉強してみようかと思っています。

本当に有難う御座いました。
(゚゚)(。。)ペコリ

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World