JavaScript htmlのプルダウンメニューの読み取り方法

・htmlで記述した、プルダウンメニューの作り方

<form id="form>
   <select name="select">
      <option value="index.html>日本語</option>
      <option value="index-en.html>英語</option>
      <option value="index-zh.html>中文</option>
   </select>
</form>

・フォームに必要不可欠なname属性（入力項目をサーバーで扱うときに使う名前）はselectタグに記述する。optionタグには書かない。
・各optionタグにそのデータを表すvalue属性を記述する。
・プルダウンメニュー(select要素）の場合、selectタグのname属性と選択されたoptionタグのvalue属性がセットになって、サーバーに送信される。

ここから、javascriptを記述していきます。

'use strict';
document.getElementById('form').select.onchange=function(){
location.href=document.getElementById('form').select.value;
}

このコードは、onchangeイベントプロパティが発生したら呼び出される関数を作っている。
onchangeイベントは、「フォームに入力された内容が変わったとき」に発生する。
その関数の処理は、locationオブジェクトのhrefプロパティ（表示しているURL）に、フォームで選択されたoptionのvalue(URL)が代入される。
ここで、疑問なのが、なぜ「.select.value;」となっているのか？
言い換えると、selectタグ内にはvalue属性を書いてないで、optionタグ内にvalue属性を書いたのに、なぜselectの中でvalueプロパティを読み取っているのか？
その理由は、『プルダウンメニューの場合は選択されているoptionのvalue属性を調べるために、その親要素であるselectのvalueプロパティを読み取る。』

そして、script.js全体のコードを以下で記述します。

'use strict';

const lang=document.querySelector('html').lang;

if(lang==='ja'){
    document.querySelector('option[value="index.html"]').selected=true;

}else if(lang==='en'){
    document.querySelector('option[value="index-en.html"]').selected=true;

}else if(lang==='zh'){
    document.querySelector('option[value="index-zh.html"]').selected=true;
}

document.getElementById('form').select.onchange=function(){
    location.href=document.getElementById('form').select.value;
}

documentオブジェクトのquerySelectorメソッドは、()内に書かれた「セレクタ」にマッチする要素を取得する。セレクタとはCSSで使うやつです。例えば、
2行目のセレクタはタイプセレクタで指定している。
4行目のif文ないの処理では、('option[value="index-en.html"]');となっていて、これは属性セレクタです。
属性セレクタとは、　要素名[属性名＝"属性値"]　で指定する方法です。
ここでまた注意点があります。
（複数の要素がマッチしたらどうなるの？という点)
この場合、htmlではマッチした全てが対象になるが、
javascriptでは『最初にマッチした要素』一つだけ対象になる。

参考：javascript超入門　P198~