uhyohyo.net

JavaScript初級者から中級者になろう

二章第十三回 フォームの操作2

HTMLSelectElement

select要素のHTMLElementは、HTMLSelectElementといいます。これも、いろいろなプロパティを持っています。

INPUTと共通のプロパティ

同じフォームコントロールですから、inputなどと同じプロパティも多く持っています。form,disabled,blur,focusなどをinputと同じように使うことができます。

options

optionsは、そのselectが持つoption要素のHTMLOptionsCollectionです。これは、HTMLCollectionと同じように扱えます。さて、select要素の下にはoptionしか無いからchildNodesで十分だ、と思うかもしれませんが、実はそういうわけにはいきません。実は、select要素の下にはoptionの他にoptgroupという要素がある可能性があります。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="?">
      <p>
        <select>
          <optgroup label="optgroup1">
            <option>option1</option>
            <option>option2</option>
            <option>option3</option>
          </optgroup>
          <option>option4</option>
          <optgroup label="optgroup2">
            <option>option5</option>
            <option>option6</option>
            <option>option7</option>
          </optgroup>
        </select>
      </p>
    </form>
  </body>
</html>
          

やはりoptionが分散してしまいやりにくいので、それをまとめて扱うoptionsを使います。

ちなみに、select要素はlengthというプロパティを持っていて、これはそのselectが持っているoption要素の数なので、つまりelements.lengthと同じです。

selectedIndex

selectedIndexは、今選択されているoptionの番号を取得するプロパティです。番号だから、数値です。もちろん、一番上が0、次が1、その次が2・・・と続きます。ちなみに、何も選択されていない場合というのもあります。この場合-1が返されます。

optionの追加と除去

HTMLSelectElementは、option要素を追加したり除去したりするメソッドを持っています。追加するのがaddで、除去するのがremoveです。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="?">
      <p>
        <select id="aaa">
          <option>option1</option>
          <option>option2</option>
          <option>option3</option>
        </select>
      </p>
      <script type="text/javascript">
        var select = document.getElementById('aaa');

        var option = document.createElement('option');
        option.text="option4";

        select.add(option, select.options.item(0) );
      </script>
    </form>
  </body>
</html>
        

addは、実はinsertBefore(二章第六回で解説)と同じ使い方をします。第一引数(ひとつめの引数)には追加するノードを、第二引数には追加するところの直後にあるノード(追加した後に新しいノードの後ろに来るノード)を指定します。

追加するoption要素を作っているところは、二章第五回で解説しました。option要素を追加するための専用メソッドとはいえ、insertRowのようにoption要素が自動で作られるわけではないので注意しましょう。

ただ、optionの子のテキストノードを追加するかわりに、textというプロパティに代入しています。このプロパティは実はそのoptionの文字列、つまり子のテキストノードのnodeValueと同じです。ですから、このtextプロパティに文字列を代入することで、option要素の子となるテキストノードの内容(表示されるラベル)を変更できます。

こうしてできたoption要素を、addメソッドで追加しています。第二引数がselect.options.item(0)、つまり最初のoption要素です。その直前に追加されるので、一番上に来るということになります。

対して、removeの使い方はこうです。

<!doctype html>
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <form action="?">
      <p>
        <select id="aaa">
          <option>option1</option>
          <option>option2</option>
          <option>option3</option>
        </select>
      </p>
      <script type="text/javascript">
        var select = document.getElementById('aaa');

        select.remove(0);
      </script>
    </form>
  </body>
</html>
      

removeは、除去するノードを引数に渡すのではなく、optionの番号を引数に渡します。そうすると、その番号のoption要素が除去されます。これも、当然最初が0で、次が1・・・となります。

このサンプルでは0だから、0番目、つまり最初のoptionが除去されています。

HTMLOptionElement

option要素のHTMLElementはHTMLOptionElementといい、これもいろいろプロパティを持っています。

まず、input要素などと同じようにformdisabledプロパティを持っています。

他にoption特有のものは、indexプロパティです。そのoptionが親のselectの中で何番目かを表す数値です。

また、valueは、value属性の値です。

また、selectedは、そのoptionが今選択されているかどうかで、真偽値です。