select選択ボックスを動的に作る

JavaScriptで、こんな感じの、選択肢が動的に変わる選択ボックス作るサンプルです。

  • 最初に選んだ選択ボックスによって、次の選択ボックスの選択肢が変わります。

解説

  • フォームの<select>+<option>タグで作った選択ボックスは、
    Selectオブジェクトという種類のオブジェクトになります。
    Selectオブジェクトは、optionsという選択肢の配列を持っています。
    これにアクセスすることで、動的に選択肢の内容を変えることができます。
  • selectオブジェクト(選択ボックス)を取得するには、
    タグで<select name="選択ボックス名" 〜で名前をちゃんとつけて、

    form name="フォーム名" で名前をちゃんとつけて、

    フォーム名.elements["選択ボックス名"]

    または

    フォーム名.選択ボックス名

    で取得できます。

  • 選択肢が選択されたときのイベントは、onChangeです。
  • optionsの要素は、.valueと.textというプロパティを持ちます。
    .valueは、<option>タグのvalue=のことで、
    .textは、選択肢として表示されるテキストのことです。

コード

すべて開くすべて閉じる
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
-
!
 
-
!
 
 
 
 
 
-
!
 
-
|
|
|
!
-
|
|
|
|
!
-
|
|
|
|
!
-
|
|
-
!
-
|
!
!
-
|
|
|
!
-
-
!
|
|
!
-
|
-
|
|
-
!
|
!
 
-
!
<html>
<title>JavaScript:動的選択ボックス作成サンプル</title>
<head>
</head>
<body>
動的選択ボックス作成サンプル : 商品編 <br>
 
<form name="form1" method="get" 
action="http://f29.aaa.livedoor.jp/~morg/wiki/sample/disp_send.php" onsubmit="gettext(this)">
<!-- set name and onChange -->
<select name="sel_bunruiA" onChange="selectBunruiA(this)">
<option value="">(種類)</option>
</select>
<select name="sel_bunruiB" width="100px"><option value="">(品名)</option></select>
<input type="submit" value=></input> 
<input type="hidden" name="search" value=""></input>
</form>
 
<script type="text/javascript" language="JavaScript">
<!--
        var bunruiA = new Array(,,,);
 
        var bunruiB = new Array();
    bunruiB[]= new Array(,,);
    bunruiB[]= new Array(,,);
    bunruiB[]  = new Array(,,);
    bunruiB[]  = new Array(,,);
 
        createSelection( form1.elements['sel_bunruiA'], , bunruiA, bunruiA);
 
    ////////////////////////////////////////////////////
    //
            function addSelOption( selObj, myValue, myText )
    {
        selObj.length++;
        selObj.options[ selObj.length - 1].value = myValue ;
        selObj.options[ selObj.length - 1].text  = myText;
 
    }
    /////////////////////////////////////////////////////
    //
            //
    function createSelection( selObj, midashi, aryValue, aryText )
    {
        selObj.length = 0;
        addSelOption( selObj, midashi, midashi);
                for( var i=0; i < aryValue.length; i++)
        {
            addSelOption ( selObj , aryValue[i], aryText[i]);
        }
    }
    ///////////////////////////////////////////////////
    //
        //
    function selectBunruiA(obj)
    {
                createSelection(form1.elements['sel_bunruiB'], , 
                bunruiB[obj.value], bunruiB[obj.value]);
 
    }
    /////////////////////////////////////////////////
        function gettext(form){ 
        var a = form1.sel_bunruiA.value;           var b = form1.sel_bunruiB.value;                   form1.elements['search'].value = a+' AND '+b;
        alert(form1.elements['search'].value );
    } 
 
//-->
</script>

質問・コメント

  • sd -- szdx? 2012-10-15 (月) 15:25:47
  • あ -- ? 2012-11-30 (金) 13:55:35
  • d -- dd? 2012-11-30 (金) 13:55:53
  • d -- dd? 2012-11-30 (金) 13:56:03
  • 動作は期待とおりなのですが PHPでのコーデェングに悩んでいます。 -- 時遊人? 2013-06-05 (水) 11:41:48
  • ああああ -- あああ? 2014-06-09 (月) 11:27:38
  • 助かりました!ありがとうございます -- りっぴ? 2014-10-11 (土) 14:45:19
  • コーデェング -- CFJ? 2015-01-16 (金) 15:40:13
  • ああああ -- 2015-07-29 (水) 11:16:09