Search

Select/Optionオブジェクト一覧

2007/7/14

Selecオブジェクト一覧
コレクション説明
options[]プルダウンのアイテムリストを配列として取得
プロパティ説明
disabledプルダウンの無効化・有効化を取得・設定
lengthプルダウンのアイテム数を取得・設定
multipleアイテムの複数選択が許可されているかを取得・設定
select-one選択されているアイテムのインデックス番号を取得・設定
sizeプルダウンのサイズを取得・設定
typeプルダウンの選択方法を取得・設定
メソッド説明
add()アイテム追加
remove()アイテム削除
focus()フォーカスを当てる
blur()フォーカスを外す
optionオブジェクト一覧
プロパティ説明
defaultSelectedアイテムがデフォルト選択設定されているか取得
disabledアイテムの無効化・有効化を取得・設定
indexアイテムのインデックス番号を取得
selectedアイテムを選択
textアイテムのテキストを取得・設定
valueアイテムの値を取得・設定

選択された値を取得(select-oneの場合)
selectedIndexプロパティ

2007/7/14

インデックス番号 = document.Form名.Select名.selectedIndex
document.Form名.Select名.options[インデックス番号].value
document.Form名.Select名.options[インデックス番号].text

selectedIndexプロパティは、選択されているアイテムのインデックス番号を取得・設定します。 未選択の場合は、-1が返ります。

textプロパティは、アイテムの値(value属性)を取得・設定します。 値の指定がない場合(value属性なし)、Firefoxではテキストが返りますが、IEでは空文字列が返ります。

valueプロパティは、アイテムのテキストを取得・設定します。
テキストの指定がない場合は、空文字列が返ります。

選択アイテムのインデックス番号・値・テキストを取得サンプルを見る
<form name="frmA" action="#">
    <select name="one">
        <option value="">▼選択してください</option>
        <option value="valueA">テキストA</option>
        <option value="valueB">テキストB</option>
        <option value="valueC">テキストC</option>
    </select>
    <input type="button" value="インデックス番号・値・テキストを取得" onclick="fGetSelectOne()" />
</form>

<script type="text/javascript">
    function fGetSelectOne(){
        var s="";
        var frm=document.forms["frmA"];
        var idx=frm.elements["one"].selectedIndex;
        if(idx!="") {
            /* 選択されたインデックス番号 */
            s="インデックス番号="+idx+"\n";
            /* 選択された値 */
            s+="値="+frm.elements["one"].options[idx].value+"\n";
            /* 選択されたテキスト */
            s+="テキスト="+frm.elements["one"].options[idx].text;
            alert(s);
        }else{
            alert("選択してください");
        }
    }
</script>

DOMの場合

Selectオブジェクト.selectedIndex = インデックス番号;
Selectオブジェクト[インデックス番号].value = 値;
Selectオブジェクト[インデックス番号].text = テキスト;
選択アイテムのインデックス番号・値・テキストを取得(DOM)サンプルを見る
<form action="#">
    <p>
        <select id="one2">
            <option value="">▼選択してください</option>
            <option value="valueA">テキストA</option>
            <option value="valueB">テキストB</option>
            <option value="valueC">テキストC</option>
        </select>
        <input type="button" value="インデックス番号・値・テキストを取得" onclick="fGetSelectOneDOM()" />
    </p>
    <p id="resGetSelectOneDOM"></p>
</form>

<script type="text/javascript">
    function fGetSelectOneDOM(){
        var s="";
        var sObj=document.getElementById("one2");
        var idx=sObj.selectedIndex;
        if(idx != "0") {
            /* 選択されたインデックス番号 */
            s ="インデックス番号="+idx+"<br>";
            /* 選択された値 */
            s += "値="+sObj[idx].value+"<br>";
            /* 選択されたテキスト */
            s += "テキスト="+sObj[idx].text;
            document.getElementById("resGetSelectOneDOM").innerHTML=s;
        }else{
            alert("選択してください");
        }
    }
</script>

選択された値を取得(select-multipleの場合)
selectedIndexプロパティ

2007/7/14

インデックス番号 = document.Form名.Select名.selectedIndex
document.Form名.Select名.options[インデックス番号].value
document.Form名.Select名.options[インデックス番号].text

取得方法は、select-oneと同じですが、複数選択した値(value)やテキスト(text)を取得するのに、アイテムの数だけ、選択されているか調べる必要があります。

選択アイテムのインデックス番号・値・テキストを全て取得サンプルを見る
<form name="frmB" action="#">
    <p>
        <select name="multi" size="3" multiple="multiple">
            <option value="値A">テキストA</option>
            <option value="値B">テキストB</option>
            <option value="値C">テキストC</option>
        </select>
    </p>
    <p><input type="button" value="取得" onclick="fGetMSelect()" /></p>
</form>

<script type="text/javascript">
    function fGetMSelect(){
        var s="";
        var idx=new Array();
        var sel=document.forms["frmB"].elements["multi"].options;
        for(var i=0, n=0; i<sel.length; i++){
            if(sel[i].selected){ idx[n++]=i; }
        }
        if(idx.length>0){
            /* 選択されたインデックス番号 */
            s="選択されたインデックス番号 = "+idx+"\n\n";
            /* 選択数 */
            s+="選択された数 = "+idx.length+"\n\n";
            /* 選択されたテキスト */
            for(var i=0; i<sel.length; i++){
                s+="選択されたテキスト = "+sel[i].text+"\n";
            }
            alert(s);
        }else{
            alert("選択してください");
        }
    }
</script>

DOMの場合

選択アイテムのインデックス番号・値・テキストを全て取得(DOM)サンプルを見る
<form action="#">
    <p>
        <select id="multi2" size="3" multiple="multiple">
            <option value="値A">テキストA</option>
            <option value="値B">テキストB</option>
            <option value="値C">テキストC</option>
        </select>
    </p>
    <p><input type="button" value="取得" onclick="fGetMSelectDOM()" /></p>
</form>
<p id="resGetMSelectDOM"></p>

<script type="text/javascript">
    function fGetMSelectDOM(){
        var s="";
        var idx=new Array();
        var sObj=document.getElementById("multi2");
        for(var i=0, n=0; i<sObj.length; i++){
            if(sObj[i].selected){ idx[n++]=i; }
        }
        if(idx.length>0){
            /* 選択されたインデックス番号 */
            s+="選択されたインデックス番号 = "+idx+"<br \/>";
            /* 選択数 */
            s+="選択された数 = "+idx.length+"<br \/>";
            /* 選択されたテキスト */
            for(var i=0; i<sObj.length; i++){
                s+="選択されたテキスト = "+sObj[i].text+"<br \/>";
            }
            document.getElementById("resGetMSelectDOM").innerHTML=s;
        }else{
            document.getElementById("resGetMSelectDOM").innerHTML="<span class='caution'>※選択してください<\/span>";
        }
    }
</script>

プルダウンをクリア
selectedIndexプロパティ

2007/7/14

document.Form名.Select名.selectedIndex = 0

プルダウンをクリアするには、selectedIndexプロパティでプルダウンのインデックス番号に0を設定します。

プルダウンをクリアサンプルを見る
<form name="frmC" action="#">
    <select name="selC">
        <option value="0">▼選択してください</option>
        <option value="1">アイテム1</option>
        <option value="2">アイテム2</option>
        <option value="3">アイテム3</option>
    </select>
    <input type="button" name="btn" value=" クリア " onclick="resetPullDown()" />
</form>

<script type="text/javascript">
    function resetPullDown(){
        document.forms["frmC"].elements["selC"].selectedIndex=0; /* プルダウンを初期値0に戻す */
    }
</script>

DOMの場合

Selectオブジェクト.selectedIndex = 0;
プルダウンをクリア(DOM)サンプルを見る
<form action="#">
    <select id="selC">
        <option value="0">▼選択してください</option>
        <option value="1">アイテム1</option>
        <option value="2">アイテム2</option>
        <option value="3">アイテム3</option>
    </select>
    <input type="button" name="btn" value=" クリア " onclick="resetPullDownDOM()" />
</form>

<script type="text/javascript">
    function resetPullDownDOM(){
        document.getElementById("selC").selectedIndex=0; /* プルダウンを初期値0に戻す */
    }
</script>

プルダウンのアイテムリストを配列として取得
options[]

2007/7/14

[DOM] Selectオブジェクト.options[]
サンプルを見る
<form action="#">
    <p>
        <select id="selH" multiple="multiple">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p><input type="button" value="セレクトオブジェクトの情報を取得" onclick="fSelectOptions()" /></p>
    <p id="resSelectOptions"></p>
</form>

<script type="text/javascript">
    function fSelectOptions(){
        var s="";
        var sObj=document.getElementById("selH");
        for(var i in sObj.options){
            if(sObj.options[i]!=null){
                if(sObj.options[i].text){
                    s+=i+": "+sObj.options[i].text+"<br \/>";
                }else{
                    s+=i+": "+sObj.options[i]+"<br \/>";
                }
            }
        }
        document.getElementById("resSelectOptions").innerHTML=s;
    }
</script>

プルダウンを無効化・有効化
disabledプロパティ

2007/7/14

document.Form名.Select名.disabled = true | false

disabledプロパティは、プルダウンの無効化(TRUE)・有効化(FALSE)を取得・設定します。

プルダウンの有効化・無効化を切替サンプルを見る
<form name="frmG" action="#">
    <select name="selG">
        <option value="0">--------</option>
        <option value="1">アイテム1</option>
        <option value="2">アイテム2</option>
        <option value="3">アイテム3</option>
    </select>
    <input type="button" value="無効化" onclick="fSelectDisabled(true)" />
    <input type="button" value="有効化" onclick="fSelectDisabled(false)" />
</form>

<script type="text/javascript">
    function fSelectDisabled(bool){
        document.forms["frmG"].elements["selG"].disabled=bool;
    }
</script>

DOMの場合

Selectオブジェクト.disabled = true | false
プルダウンの有効化・無効化を切替(DOM)サンプルを見る
<form action="#">
    <select id="selG2">
        <option value="0">--------</option>
        <option value="1">アイテム1</option>
        <option value="2">アイテム2</option>
        <option value="3">アイテム3</option>
    </select>
    <input type="button" value="無効化" onclick="fSelectDisabledDOM(true)" />
    <input type="button" value="有効化" onclick="fSelectDisabledDOM(false)" />
</form>

<script type="text/javascript">
    function fSelectDisabledDOM(bool){
        document.getElementById("selG2").disabled=bool;
    }
</script>

プルダウンのアイテム数を取得
lengthプロパティ

2007/7/14

document.Form名.Select名.length

lengthプロパティは、プルダウンのアイテム数(option要素数)を選択します。

プルダウンのアイテム数を取得サンプルを見る
<form name="frmF" action="#">
    <p>
        <select name="selF" multiple="multiple">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p><input type="button" value="アイテム数取得" onclick="fGetSelectLength()" /></p>
</form>

<script type="text/javascript">
    function fGetSelectLength(){
        alert("length = "+document.forms["frmF"].elements["selF"].length);
    }
</script>

DOMの場合

Selectオブジェクト.options["length"];
Selectオブジェクト.length;
プルダウンのアイテム数を取得サンプルを見る
<form action="#">
    <p>
        <select id="selF2" multiple="multiple">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p><input type="button" value="アイテム数取得(DOM)" onclick="fGetSelectLengthDOM()" /></p>
    <p id="resGetSelectLengthDOM"></p>
</form>

<script type="text/javascript">
    function fGetSelectLengthDOM(){
        var s="";
        /* lengthプロパティ使用 */
        s+="length = "+document.getElementById("selF2").length+"<br \/>";
        /* options[]コレクションのlength参照 */
        s+="options['length'] = "+document.getElementById("selF2").options["length"]+"<br \/>";
        document.getElementById("resGetSelectLengthDOM").innerHTML=s;
    }
</script>

アイテムのアイテム選択形式を切替
multipleプロパティ

2007/7/14

Selectオブジェクト.multiple = true | false

multipleプロパティは、アイテムの複数選択が許可されているか否かを取得・設定します。

TRUEを指定した場合は複数選択が許可されるのでselect-multiple(複数アイテム選択型)になります。

FALSEを指定した場合は1アイテムしか選択できなくなるので、select-one(1アイテム選択型)になります。

サンプルを見る
<form action="#">
    <p>
        切替: 
        <input type="button" value="複数アイテム選択型" onclick="fSetSelectMultiple(true)" />
        <input type="button" value="1アイテム選択型" onclick="fSetSelectMultiple(false)" />
    </p>
    <p id="resSetSelectMultiple"></p>
    <p>
        <select id="selE">
            <option value="0" selected>アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
            <option value="4">アイテム4</option>
            <option value="5">アイテム5</option>
            <option value="6">アイテム6</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    function fSetSelectMultiple(bool){
        var s="";
        var sObj=document.getElementById("selE");
        sObj.multiple=bool;
        document.getElementById("resSetSelectMultiple").innerHTML="multiple: "+sObj.multiple+"<br \/>type: "+sObj.type;
    }
</script>

切替:

プルダウンのサイズを変更
sizeプロパティ

2007/7/14

document.Form名.Select名.size = 数値;

sizeプロパティは、プルダウンのサイズを取得・設定します。
指定した数値分のアイテムが見える状態にプルダウンが縦方向に伸びます。
デフォルトは、1です。

プルダウンの幅や高さを指定する場合は、スタイルシートのwidth/height属性を使用してください。

プルダウンのサイズを変更サンプルを見る
<form name="frmS" action="#">
    <p>プルダウンのサイズ変更: 
        <label for="sz5"><input type="radio" id="sz5" name="sz" value="5" onclick="fSetSelectSize(this.value)" />5</label>
        <label for="sz4"><input type="radio" id="sz4" name="sz" value="4" onclick="fSetSelectSize(this.value)" />4</label>
        <label for="sz3"><input type="radio" id="sz3" name="sz" value="3" onclick="fSetSelectSize(this.value)" />3</label>
        <label for="sz2"><input type="radio" id="sz2" name="sz" value="2" onclick="fSetSelectSize(this.value)" />2</label>
        <label for="sz1"><input type="radio" id="sz1" name="sz" value="1" onclick="fSetSelectSize(this.value)" />1(デフォルト)</label>
    </p>
    <p>
        <select name="selS">
            <option value="0">-----------</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
            <option value="3">アイテム4</option>
            <option value="3">アイテム5</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    function fSetSelectSize(num){
        var sObj=document.forms["frmS"].elements["selS"];
        sObj.size=num;
    }
</script>

プルダウンのサイズ変更:

DOMの場合

Selectオブジェクト.size = 数値
プルダウンのサイズを変更サンプルを見る
<form action="#">
    <p>プルダウンのサイズ変更: 
        <label for="szz5"><input type="radio" id="szx5" name="szx" value="5" onclick="fSetSelectSizeDOM(this.value)" />5</label>
        <label for="szz4"><input type="radio" id="szx4" name="szx" value="4" onclick="fSetSelectSizeDOM(this.value)" />4</label>
        <label for="szz3"><input type="radio" id="szx3" name="szx" value="3" onclick="fSetSelectSizeDOM(this.value)" />3</label>
        <label for="szz2"><input type="radio" id="szx2" name="szx" value="2" onclick="fSetSelectSizeDOM(this.value)" />2</label>
        <label for="szz1"><input type="radio" id="szx1" name="szx" value="1" onclick="fSetSelectSizeDOM(this.value)" />1(デフォルト)</label>
    </p>
    <p>
        <select id="selS2">
            <option value="0">-----------</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
            <option value="4">アイテム4</option>
            <option value="5">アイテム5</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    function fSetSelectSizeDOM(num){
        var sObj=document.getElementById("selS2");
        sObj.size=num;
    }
</script>

プルダウンのサイズ変更:

プルダウンのアイテム選択形式を取得
typeプロパティ

2007/7/14

Selectオブジェクト.type = select-one | select-multiple

typeプロパティは、プルダウンのタイプ(アイテムの選択形式)を取得します。 1アイテム選択型の場合はselect-one(デフォルト)、複数アイテム選択型の場合はselect-multipleになります。

アイテムの選択形式を設定する場合は、multipleプロパティを使用してください。

サンプルを見る
<form action="#">
    <p>
        <select id="selS">
            <option value="0">--------</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
        <input type="button" value="プルダウンのtype属性を取得" onclick="fGetSelectType('selS')" />
    </p>
    <p>
        <select id="selM" size="2" multiple>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
        <input type="button" value="プルダウンのtype属性を取得" onclick="fGetSelectType('selM')" />
    </p>
</form>

<script type="text/javascript">
    /* プルダウンのtype属性取得 */
    function fGetSelectType(id){
        var sObj=document.getElementById(id);
        alert("type: "+sObj.type);
    }
</script>

プルダウンにアイテム追加/プルダウンからアイテム削除
new Option/addメソッド/removeメソッド

2007/7/14

document.Form名.Select名[インデックス番号] = new Option(追加するテキスト, 追加する値);

select-oneの例

アイテムの追加・削除 for 1アイテム選択型サンプルを見る
<form name="frmX" action="#">
    <p>
        【追加】<br>
        <input type="button" value="末尾にアイテム追加" onclick="fAddItem()" />
    </p>
    <p>
        【削除】<br>
        <input type="button" value="選択したアイテムを削除" onclick="fDeleteItemSelectedIndex()" />
        <input type="button" value="先頭からアイテム削除" onclick="fDeleteItem('first')" />
        <input type="button" value="末尾からアイテム削除" onclick="fDeleteItem('last')" />
    </p>
    <p>
        <select name="selX" size="10" style="width:200px;">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    /* プルダウンにアイテム追加 */
    function fAddItem(){
        var sObj=document.forms["frmX"].elements["selX"];
        var idx=sObj.length;
        sObj.options[idx]=new Option("テキスト"+idx, "値"+idx);
    }
    /* プルダウンからアイテム削除 */
    function fDeleteItem(flag){
        var sObj=document.forms["frmX"].elements["selX"];
        var sLen=sObj.length;
        if(sLen>0){
            if(flag=="first"){
                sObj.options[0]=null;
            }else{
                sObj.options[sLen-1]=null;
            }
        }else{
            alert("削除するアイテムがありません");
        }
    }
    /* 選択したアイテムを削除 */
    function fDeleteItemSelectedIndex(){
        var sObj=document.forms["frmX"].elements["selX"];
        var idx=sObj.selectedIndex;
        if(idx==-1){
            alert("アイテムが選択されていないか、削除するアイテムがありません");
        }else{
            sObj.options[idx]=null;
        }
    }
</script>

【追加】

【削除】

select-multipleの例

複数アイテム選択型のプルダウンの場合、アイテムの追加・削除は1アイテム選択型(select-one)と同じです。 ただし、選択されたアイテムを削除する場合は、アイテム数の数だけアイテムが選択されているか1つ1つ調べる必要があります。

アイテムの追加・削除 for 複数アイテム選択型サンプルを見る
<form name="frmX2" action="#">
    <p>
        【追加】<input type="button" value="末尾にアイテム追加" onclick="fAddItem2()" /><br>
        【削除】<input type="button" value="選択したアイテムを削除" onclick="fDeleteItemSelectedIndex2()" />(複数選択可)
    </p>
    <p>
        <select name="selX2" multiple size="10" style="width:200px;">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    /* プルダウンにアイテム追加 */
    function fAddItem2(){
        var sObj=document.forms["frmX2"].elements["selX2"];
        var idx=sObj.length;
        sObj.options[idx]=new Option("テキスト"+idx, "値"+idx);
    }
    /* 選択したアイテムを削除 */
    function fDeleteItemSelectedIndex2(){
        var sObj=document.forms["frmX2"].elements["selX2"];
        var idx=new Array();
        for(var i=0,j=0; i<sObj.length; i++){
            if(sObj.options[i].selected==true){
                idx[j]=i;
                j++;
            }
        }
        if(j>0){
            for(var i=0; i<idx.length; i++){
                /*
                  削除するとインデックス番号が1つ減るので
                  格納したインデックス番号から削除したアイテム数を引く
                */
                sObj.options[idx[i]-i]=null;
            }
        }else{
            alert("アイテムが選択されていないか、削除するアイテムがありません");
        }
    }
</script>

【追加】
【削除】(複数選択可)

DOMの場合

Selectオブジェクト.add( optionオブジェクト, null )
Selectオブジェクト.remove( optionオブジェクト )

addメソッドは、プルダウンに新しいアイテムを追加します。
removeメソッドは、プルダウンから指定したアイテムを削除します。

IEでは、addメソッドの構文が異なる(第1引数しかない)ので、try catchを使って処理を分岐しています。

select-oneの例

アイテムの追加・削除 for 1アイテム選択型(DOM)サンプルを見る
<form action="#">
    <p>
        【追加】<br>
        <input type="button" value="末尾にアイテム追加" onclick="fAddItemDOM()" />
    </p>
    <p>
        【削除】<br>
        <input type="button" value="選択したアイテムを削除" onclick="fRemoveItemSelectedIndexDOM()" />
        <input type="button" value="先頭からアイテム削除" onclick="fRemoveItemDOM('first')" />
        <input type="button" value="末尾からアイテム削除" onclick="fRemoveItemDOM('last')" />
    </p>
    <p>
        <select id="selY" size="5" style="width:200px;">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p id="redAddRemove"></p>
</form>

<script type="text/javascript">
    /* プルダウンにアイテム追加 */
    function fAddItemDOM(){
        var sObj=document.getElementById("selY");
        var oObj=document.createElement("option");
        var sLen=sObj.length;
        oObj.text="追加アイテム"+sLen;
        try{
            sObj.add(oObj,null);
        }catch(e){
            /* IE */
            sObj.add(oObj);
        }
    }
    /* プルダウンからアイテム削除 */
    function fRemoveItemDOM(flag){
        var s="";
        var sObj=document.getElementById("selY");
        var sLen=sObj.length;
        if(sLen>0){
            if(flag=="first"){
                /* 先頭から削除 */
                sObj.remove(0);
            }else{
                /* 末尾から削除 */
                sObj.remove(sLen-1);
            }
            s+="";
        }else{
            s+="<span class='caution'>※削除するアイテムがありません。<\/span>";
        }
        document.getElementById("redAddRemove").innerHTML=s;
    }
    /* 選択したアイテムを削除 */
    function fRemoveItemSelectedIndexDOM(){
        var s="";
        var sObj=document.getElementById("selY");
        var idx=sObj.selectedIndex;
        if(idx>=0){
            sObj.remove(idx);
            s+="";
        }else{
            s+="<span class='caution'>※削除するアイテムが選択されていないか、削除するアイテムがありません。<\/span>";
        }
        document.getElementById("redAddRemove").innerHTML=s;
    }
</script>

【追加】

【削除】

select-multipleの例

複数アイテム選択型のプルダウンの場合、アイテムの追加・削除は1アイテム選択型(select-one)と同じです。 ただし、選択されたアイテムを削除する場合は、アイテム数の数だけアイテムが選択されているか1つ1つ調べる必要があります。

アイテムの追加・削除 for 複数アイテム選択型(DOM)サンプルを見る
<form action="#">
    <p>
        【追加】<input type="button" value="末尾にアイテム追加" onclick="fAddItemDOM2()" /><br>
        【削除】<input type="button" value="選択したアイテムを削除(複数選択可)" onclick="fRemoveItemSelectedIndexDOM2()" />
    </p>
    <p>
        <select id="selY2" multiple="multiple" style="width:200px;">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p id="redAddRemove2"></p>
</form>

<script type="text/javascript">
    /* プルダウンにアイテム追加 */
    function fAddItemDOM2(){
        var sObj=document.getElementById("selY2");
        var oObj=document.createElement("option");
        var sLen=sObj.length;
        oObj.text="追加アイテム"+sLen;
        try{
            sObj.add(oObj,null);
        }catch(e){
            /* IE */
            sObj.add(oObj);
        }
    }
    /* 選択したアイテムを削除 */
    function fRemoveItemSelectedIndexDOM2(){
        var s="";
        var sObj=document.getElementById("selY2");
        var idx=new Array();
        /* 選択されているアイテムのインデックス番号を配列に格納 */
        for(var i=0,j=0; i<sObj.length; i++){
            if(sObj[i].selected){
                idx[j]=i;
                j++;
            }
        }
        if(j>0){
            for(var i=0; i<idx.length; i++){
                /*
                  削除するとインデックス番号が1つ減るので
                  格納したインデックス番号から削除したアイテム数を引く
                */
                sObj.remove(idx[i]-i);
            }
            s+="";
        }else{
            s+="<span class='caution'>※削除するアイテムが選択されていないか、削除するアイテムがありません。<\/span>";
        }
        document.getElementById("redAddRemove2").innerHTML=s;
    }
</script>

【追加】
【削除】

2つのプルダウン間でアイテム移動

2007/7/14

2つのプルダウン間でアイテム移動(DOM)サンプルを見る
<form action="#">
    <table>
        <tr>
            <th>好きなホラー映画</th>
            <th>&nbsp;</th>
            <th>嫌いなホラー映画</th>
        </tr>
        <tr style="vertical-align:top">
            <td>
                <select id="moveA" size="10" style="width:150px;">
                    <option value="jason">13日の金曜日</option>
                    <option value="flady">エルム街の悪夢</option>
                    <option value="screem">スクリーム</option>
                    <option value="lastsummer">ラスト・サマー</option>
                </select>
            </td>
            <td>
                <input type="button" value="→移動→" onclick="fMoveItem('A','B')" /><br>
                <input type="button" value="←移動←" onclick="fMoveItem('B','A')" /><br>
            </td>
            <td>
                <select id="moveB" size="10" style="width:150px;">
                    <option value="exsosit">エクソシスト</option>
                    <option value="braindead">ブレインデット</option>
                    <option value="syco">サイコ</option>
                    <option value="zombi">ゾンビ</option>
                    <option value="pet">ペット・セメタリー</option>
                </select>
            </td>
        </tr>
    </table>
    <p id="resMoveItem"></p>
</form>

<script type="text/javascript">
    /* アイテム移動 */
    function fMoveItem(from,to){
        var s="";
        /* 移動元 */
        var frmObj=document.getElementById("move"+from);
        /* 移動先 */
        var toObj=document.getElementById("move"+to);
        /* 移動元の選択アイテムのインデックス番号 */
        var frmIdx=frmObj.selectedIndex;
        /* 移動先のアイテム数 */
        var toLen=toObj.length;
        /* 移動するアイテムが選択されていた場合 */
        if(frmIdx>=0){
            /* 先に、移動するアイテムのテキストと値を変数に格納 */
            var moveText=frmObj[frmIdx].text;
            var moveValue=frmObj[frmIdx].value;
            /* 移動するアイテムを削除 */
            frmObj.remove(frmIdx);
            /* OPTION要素を生成 */
            var optObj=document.createElement("OPTION");
            /* OPTION要素のvalue属性を設定 */
            optObj.setAttribute("value",moveValue);
            /* OPTION要素のテキストを設定 */
            if(navigator.userAgent.indexOf("MSIE")>-1){
                optObj.innerText=moveText;
            }else{
                optObj.textContent=moveText;
            }
            /* 移動先に追加 */
            toObj.appendChild(optObj);
            s="";
        }else{
            s+="<span class='caution'>※移動するアイテムがないか、移動するアイテムが選択されていません。<\/span>";
        }
        document.getElementById("resMoveItem").innerHTML=s
    }
</script>
好きなホラー映画   嫌いなホラー映画


プルダウにフォーカスを当てる・外す
focus/blurメソッド

2007/7/14

document.Form名.Select名.focus();
document.Form名.Select名.blur();

focusメソッドは、プルダウンにフォーカスを当てます。
blurメソッドは、プルダウンからフォーカスを外します。

フォーカスを当てる・外すサンプルを見る
<form name="frmD" action="#">
    <select name="selD">
        <option value="0">アイテム0</option>
        <option value="1">アイテム1</option>
        <option value="2">アイテム2</option>
    </select>
    <input type="button" value="フォーカスを当てる" onclick="fSelectFocus()" />
    <input type="button" value="フォーカスを外す" onclick="fSelectBlur()" />
</form>

<script type="text/javascript">
    function fSelectFocus(){
        /* フォーカスを当てる */
        document.forms["frmD"].elements["selD"].focus();
    }
    function fSelectBlur(){
        /* フォーカスを外す */
        document.forms["frmD"].elements["selD"].blur();
    }
</script>

DOMの場合

Selectオブジェクト.focus();
Selectオブジェクト.blur();
フォーカスを当てる・外す(DOM)サンプルを見る
<form action="#">
    <select id="selD2">
        <option value="0">アイテム0</option>
        <option value="1">アイテム1</option>
        <option value="2">アイテム2</option>
    </select>
    <input type="button" value="フォーカスを当てる" onclick="fSelectFocusDOM()" />
    <input type="button" value="フォーカスを外す" onclick="fSelectBlurDOM()" />
</form>

<script type="text/javascript">
    function fSelectFocusDOM(){
        /* フォーカスを当てる */
        var sObj=document.getElementById("selD2");
        sObj.focus();
    }
    function fSelectBlurDOM(){
        /* フォーカスを外す */
        var sObj=document.getElementById("selJ");
        sObj.blur();
    }
</script>

選択されたURLへ移動

2007/7/14

サンプルを見る
<form action="#">
    <select name="sel">
        <option value="">▼移動先を選択してください </option>
        <option value="http://www.yahoo.co.jp/">YAHOO! JAPAN</option>
        <option value="http://www.google.co.jp/">Google</option>
    </select>
    <input type="button" value="Jump" onclick="Jump(this.form)" />
</form>

<script type="text/javascript">
    function Jump(frm){
        var obj=frm.elements["sel"].options;
        var idx=obj.selectedIndex;
        if(idx==0){
            /* 選択されていない場合 */
            alert("移動先を選択してください");
        }else{
            /* 選択された値(URL)へ移動 */
            location.href=obj[idx].value;
        }
    }
</script>

連動プルダウン

2007/7/14

サンプルを見る
<form action="#">
    <table>
        <tr>
            <th>親ジャンル</th>
            <td>
                <select name="parentS" onchange="createChildOptions(this.form)" style="width:200px;">
                    <option value="">親ジャンルを選択して下さい</option>
                    <option value="1">Fruits</option>
                    <option value="2">Vegitables</option>
                    <option value="3">Driknks</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>子ジャンル</th>
            <td><!--表示位置--><div id="childS"></div></td>
        </tr>
    </table>
    <p><input type="button" value="選択内容を確認" onclick="chkSelect(this.form);" /></p>
</form>

<script type="text/javascript">
    /* 子ジャンル(selectC)用の配列 */
    var item = new Array();

        item[0] = new Array();
        item[0][0]="---------------------";

        /* Fruits */
        item[1] = new Array();
        item[1][0]="子ジャンルを選択して下さい";
        item[1][1]="Apple";
        item[1][2]="Banana";
        item[1][3]="Melon";
        item[1][4]="Grape";

        /* Vegitables */
        item[2]= new Array();
        item[2][0]="子ジャンルを選択して下さい";
        item[2][1]="Potato";
        item[2][2]="Carrot";
        item[2][3]="Tomato";

        /* Drinks */
        item[3] = new Array();
        item[3][0]="子ジャンルを選択して下さい";
        item[3][1] = "Splite";
        item[3][2] = "Beer";
        item[3][3] = "Cola";
        item[3][4] = "Coffee";
        item[3][5] = "Milk Tea";

    /* 子ジャンルのID名 */
    var idName="childS";

    /* 親ジャンルが変更されたら、子ジャンルを生成 */
    function createChildOptions(frmObj) {
        /* 親ジャンルを変数pObjに格納 */
        var pObj=frmObj.elements["parentS"].options;
        /* 親ジャンルのoption数 */
        var pObjLen=pObj.length;
        var htm="<select name='childS' style='width:200px;'>";
        for(i=0; i<pObjLen; i++ ) {
            /* 親ジャンルの選択値を取得 */
            if(pObj[i].selected>0){
                var itemLen=item[i].length;
                for(j=0; j<itemLen; j++){
                    htm+="<option value='"+j+"'>"+item[i][j]+"<\/option>";
                }
            }
        }
        htm+="<\/select>";
        /* HTML出力 */
        document.getElementById(idName).innerHTML=htm;
    }

    /* 選択されている値をアラート表示 */
    function chkSelect(frmObj) {
        var s="";
        var idxP=frmObj.elements['parentS'].selectedIndex;
        var idxC=frmObj.elements['childS'].selectedIndex;
        if(idxP>0){
            s+="親ジャンルの選択肢:"+frmObj.elements['parentS'][idxP].text+"\n";
            if(idxC > 0){
                s+="子ジャンルの選択肢:"+frmObj.elements['childS'][idxC].text+"\n";
            }else{
                s+="子ジャンルが選択されていません\n";
            }
        }else{
            s+="親ジャンルが選択されていません\n";
        }
        alert(s);
    }

    /* onLoad時にプルダウンを初期化 */
    function init(){
        htm ="<select name='childS' style='width:200px;'>";
        htm+="<option value=''>"+item[0][0]+"<\/option>";
        htm+="<\/select>";
        /* HTML出力 */
        document.getElementById("childS").innerHTML=htm;
    }

    /* ページ読み込み完了時に、プルダウン初期化を実行 */
    window.onload=init;
</script>
親ジャンル
子ジャンル

2つのプルダウン重複選択不可

2007/7/14

サンプルを見る
<form action="#">
    出発駅
    <select name="jr_st" onchange="dblCheck(this)">
        <option value="" selected="selected">▼ 選択 ▼ </option>
        <option value="sinjyuku">新宿</option>
        <option value="yoyogi">代々木</option>
        <option value="harajyuku">原宿</option>
        <option value="sibuya">渋谷</option>
        <option value="ebisu">恵比寿</option>
        <option value="meguro">目黒</option>
        <option value="gotanda">五反田</option>
    </select> 
    到着駅
    <select name="jr_ed" onchange="dblCheck(this)">
        <option value="" selected="selected">▼ 選択 ▼ </option>
        <option value="sinjyuku">新宿</option>
        <option value="yoyogi">代々木</option>
        <option value="harajyuku">原宿</option>
        <option value="sibuya">渋谷</option>
        <option value="ebisu">恵比寿</option>
        <option value="meguro">目黒</option>
        <option value="gotanda">五反田</option>
    </select>
</form>

<script type="text/javascript">
    /**
     * [関数名] dblCheck
     * [機 能] 重複選択チェック
     * [説 明] 2つのプルダウン(出発駅と到着駅)で同じ駅名を選択したらアラート表示
     * [引 数]
     * @param sel セレクトオブジェクト
    */
    function dblCheck(sObj){
        /* 重複カウンター */
        var dbl=0;
        /* 出発駅の選択されたインデックス番号 */
        var st =sObj.form.elements['jr_st'].selectedIndex;
        /* 到着駅の選択されたインデックス番号 */
        var ed=sObj.form.elements['jr_ed'].selectedIndex;
        if(st!="" && ed!=""){
            /* 同じ駅名を選択している場合はカウントアップ */
            if(st==ed) dbl++;
        }
        if(dbl>0){
            /* 同じ駅名が選択されている場合はアラート表示 */
            alert("出発駅と到着駅が重複しています");
            /* プルダウンクリア */
            sObj.selectedIndex=0;
        }
    }
</script>
出発駅   到着駅

アイテムがデフォルト選択設定されているか取得
defaultSelectedプロパティ

2007/7/14

Optionオブジェクト.defaultSelected = true | false

optionオブジェクトのdefaultSelectedプロパティは、アイテムにデフォルト選択が設定されているかを取得します。 option要素にselected属性が指定されている場合はTRUEを返し、そうでない場合はFALSEを返します。

デフォルト選択アイテムを取得サンプルを見る
<form action="#">
    <p>
        <select id="selK" multiple="multiple">
            <option value="0">--------</option>
            <option value="1">アイテム1</option>
            <option value="2" selected="selected">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p><input type="button" value="デフォルト選択項目取得" onclick="fDefSelected()" /></p>
</form>

<script type="text/javascript">
    function fDefSelected(){
        var sObj=document.getElementById("selK");
        for(var i=0; i<sObj.length; i++){
            var oObj=sObj[i];
            if(oObj!=null && oObj.nodeName=="OPTION"){
                if(oObj.defaultSelected==true){
                    alert("デフォルト選択項目は、「"+oObj.text+"」です");
                }
            }
        }
    }
</script>

アイテムを無効化・有効化
disabledプロパティ

2007/7/14

Optionオブジェクト.disabled = true(無効化) | false(有効化)

optionオブジェクトのdisabledプロパティは、アイテムの無効化(TRUE)・有効化(FALSE)を取得・設定します。 TRUEを指定した場合にアイテムは無効化され選択できなくなります。 FALSEを指定した場合にアイテムは有効化され、選択できるようになります。

プルダウン全体を無効化・有効化する場合は、selectオブジェクトのdisabledプロパティを使用してください。

デフォルト選択アイテムを取得サンプルを見る
<form action="#">
    <p>
        <input type="button" value="インデックスが偶数の項目を無効化" onclick="fOptDisabled(true)" />
        <input type="button" value="インデックスが偶数の項目を有効化" onclick="fOptDisabled(false)" />
    </p>
    <p>
        <select id="selQ" multiple="multiple">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
            <option value="4">アイテム4</option>
            <option value="5">アイテム5</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    function fOptDisabled(bool){
        var sObj=document.getElementById("selQ");
        var cnt=0;
        for(var i=0; i<sObj.length; i++){
            var oObj=sObj[i];
            if(oObj!=null && oObj.nodeName=="OPTION"){
                if(cnt%2!=0){
                    oObj.disabled=bool;
                }
                cnt++;
            }
        }
    }
</script>

アイテムのインデックス番号を取得
indexプロパティ

2007/7/14

Optionオブジェクト.index = インデックス番号

indexプロパティは、プルダウンにおけるアイテムのインデックス番号を取得します。 先頭のアイテムは0番目になります。

アイテムのインデックス番号を取得サンプルを見る
<form action="#">
    <p>
        <select id="selL" multiple="multiple">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p><input type="button" value="インデックス番号取得" onclick="fGetOptIdx()" /></p>
    <p id="resGetOptIdx"></p>
</form>
<script type="text/javascript">
    function fGetOptIdx(){
        var s="";
        var sObj=document.getElementById("selL");
        for(var i=0; i<sObj.length; i++){
            if(sObj[i]!=null){
                s+="["+i+"].index = "+sObj[i].index+"<br>";
            }
        }
        document.getElementById("resGetOptIdx").innerHTML=s;
    }
</script>

アイテム選択・不選択を取得・設定
selectedプロパティ

2007/7/14

document.Form名.Select名.options[].selected = true | false

optionオブジェクトのselectedプロパティは、アイテムの選択状態(選択:TRUE/不選択:FALSE)を取得・設定します。 TRUEを指定するとアイテムが選択され、FALSEを指定するとアイテムの選択が解除されます。

アイテムの選択状態を取得サンプルを見る
<form name="frmN" action="#">
    <p>
        3番目のアイテム: 
        <input type="button" value="選択" onclick="fOptSelect(3,true)" />
        <input type="button" value="選択解除" onclick="fOptSelect(3,false)" />
    </p>
    <p>
        <select name="selN1">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p>
        アイテム: <input type="button" value="全選択" onclick="fOptSelectAll(true)" />
        <input type="button" value="全選択解除" onclick="fOptSelectAll(false)" />
    </p>
    <p>
        <select name="selN2" multiple>
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    /* 指定したインデックス番号のアイテムを選択・解除 */
    function fOptSelect(idx, bool){
        var sObj=document.forms["frmN"].elements["selN1"];
        sObj.options[idx].selected=bool;
    }
    /* 全アイテム選択・解除 */
    function fOptSelectAll(bool){
        var sObj=document.forms["frmN"].elements["selN2"];
        for(var i=0; i<sObj.length; i++){
            sObj.options[i].selected=bool;
        }
    }
</script>

3番目のアイテム:

アイテム:

DOMの場合

optionオブジェクト.selected = true | false
アイテムの選択状態を取得(DOM)サンプルを見る
<form action="#">
    <p>
        3番目のアイテム: <input type="button" value="選択" onclick="fOptSelectDOM(3,true)" />
        <input type="button" value="選択解除" onclick="fOptSelectDOM(3,false)" />
    </p>
    <p>
        <select id="selN3">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
    <p>
        アイテム: <input type="button" value="全選択" onclick="fOptSelectAllDOM(true)" />
        <input type="button" value="全選択解除" onclick="fOptSelectAllDOM(false)" />
    </p>
    <p>
        <select id="selN4" multiple="multiple">
            <option value="0">アイテム0</option>
            <option value="1">アイテム1</option>
            <option value="2">アイテム2</option>
            <option value="3">アイテム3</option>
        </select>
    </p>
</form>

<script type="text/javascript">
    function fOptSelectDOM(idx,bool){
        var sObj=document.getElementById("selN3");
        if(sObj[idx]!=null){
            sObj[idx].selected=bool;
        }
    }
    function fOptSelectAllDOM(bool){
        var sObj=document.getElementById("selN4");
        for(var i=0; i<sObj.length; i++){
            if(sObj[i]!=null){
                sObj[i].selected=bool;
            }
        }
    }
</script>

3番目のアイテム:

アイテム:

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women