VBScriptで書くセレクトボックスのプルダウン選択肢の選択方法

VBScriptで書くセレクトボックスの選択方法

ルートは3通り

こんなHTMLを例に解説します

<table border="0" cellspacing="2" cellpadding="0">
  <tbody>
    <tr valign="middle"> 
      <td> 
        <select name="y">
          <option value="2019">2019</option>
          <option value="2020" selected="selected">2020</option>
         </select>
      </td>
      <td><font size="-1">年</font></td>
      <td>
        <select name="m">
          <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>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9" selected="selected">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
      </td>
      <td><font size="-1">月</font></td>
      <td>
        <select name="d">
          <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>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14" selected="selected">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>
      </td>
    <td><font size="-1">日</font></td>
    <td><input type="submit" value="日次データ表示"></td>
  </tr>
  </tbody>
</table>

このコードは実際に楽天市場RMSで利用されているものです。
下の赤マーカーの箇所にあたります。

方法1：Allオブジェクトを利用する

HTMLで『年』『月』『日』それぞれのSelectのNameを見ると次のようになっています。

Allオブジェクトではこのnameを利用します。

objIE.document.all("y")(0).Selected = True
objIE.document.all("m")(8).Selected = True
objIE.document.all("d")(10).Selected = True

これで「其々の選択肢の一番上、9番目、11番目の選択を有効にしろ」との指示になります。

生成される日付は 『2019年9月11日』
ややこしいのは8月と思って8を指示していてもスタートが【 0 】なので9番目を選択すると言う所。

つまりは何処かから取得したい月や日を抽出していても、 そのまま送るとズレる という事です。
全くもって面倒臭い。

「同じNameの選択肢があったらどうすんの？」という疑問も出てきます。
そこはAllの前に[ .getElementsByName ] などで抽出しておくことが可能です。

方法2：抽出してindex番号で指示

どうせ抽出するのならAllなんてコマンド使わないで番号指示しちゃえばいいんじゃね？
それがこの2番の方法です。

objIE.document.getElementsByName("y")(0).selectedIndex = 0
objIE.document.getElementsByName("m")(0).selectedIndex = 8
objIE.document.getElementsByName("d")(0).selectedIndex = 10

name="y" の2番目を触っているなら[ objIE.document.getElementsByName("y")(1).selectedIndex = 0 ]となります。

同じNameの選択肢があった場合番号を変えるだけで処理を変更できるので判り易いです。

ただ、方法1と同じく日付とかだと数字のズレがやはり気になります。

方法3：抽出してValueの値で選択

8月の8をそのまま使いたい時などはこれが一番便利です。

objIE.document.getElementsByName("y")(0).value = 2019
objIE.document.getElementsByName("m")(0).value = 9
objIE.document.getElementsByName("d")(0).value = 11

選択したい日付をそのままで指示できます。
うん、判り易い。

まとめ

Valueの値が整理されている場合は方法3が一番使い易いです。

ただ、この方法は[ <option value=1>8月</option> ]などとなっている場合使えません。

なので、3つとも知っておいて使い分けるがベストかと。