リストメニューからのリンク
個人的メモになりますが、少しでも参考になるならって事でここにメモしますね。リストからのリンク、テストページ
このページは今個人的に扱っている部分で、選択したリストからページを表示する為のJavaScriptを使ったページになります。
その為、HTMLも多少勉強することになりますが、VBAでのIE操作をしていると嫌でもHTMLから要素を取ったりするために見てるので、意外と少しわかるようになってるものですよ。笑
リストボックスの作成【HTML】
ここは多分簡単ですよね?selectの中にoptionでリストの中身を追加していくだけです。
まずは下記のコードとリストを開いてを見てください。
<form id="form1">
<select id="selist">
<option value=41">繰り返し【For】</option>
<option value="42">もしも○○の時【If】</option>
<option value="43">繰り返し【For Each】</option>
<option value="44">繰り返し【Do While】</option>
<option value="45">繰り返し【Do Until】</option>
<option value="51">IE自動操作</option>
<option value="52">IE操作【IE起動～読み込み】</option>
<option value="53">IE操作【inputタグへの値の入力】</option>
<option value="54">IE操作【リスト選択～送信ボタン】</option>
<option value="55">IE操作【表の取り出し】</option>
</select>
</form>このようにselectタグの中にoptionタグで要素を追加するだけです。
ただ、この状態だと区切りがなく見難いですよね？
この時に便利な昨日としてoptgroupがあります。
このoptgroupは選択できないリストのパーツを作り、グループ分けが出来るのです。
ではこのoptgroupを使ったリストのHTMLとリスト自体はこのようになります。
<form id="form1">
<select id="selist">
<optgroup label="VBAのステートメント">
<option value="41">繰り返し【For】</option>
<option value="42">もしも○○の時【If】</option>
<option value="43">繰り返し【For Each】</option>
<option value="44">繰り返し【Do While】</option>
<option value="45">繰り返し【Do Until】</option>
<optgroup label="IEの自動操作">
<option value="51">IE自動操作</option>
<option value="52">IE操作【IE起動～読み込み】</option>
<option value="53">IE操作【inputタグへの値の入力】</option>
<option value="54">IE操作【リスト選択～送信ボタン】</option>
<option value="55">IE操作【表の取り出し】</option>
</select>
</form>こうしてあげることでリストに選択できないラベルが付いてグループ分けが出来ます。
さっきのリストより全然見やすくなってますよね?
リストメニューを作る際には見やすいことが1番なので複数のリストを作るか、このように1つのリストにグループ分けをしてあげることで見やすいリストを作ることが出来るようになります。
送信ボタンの設置
次に送信ボタンの設置についてです。送信ボタンにはtypeの部分をsubmitとbuttonの2種類で使えますが、この後説明するJavaScriptで「location.href」を呼び出す場合、submitでは動作しないので、buttonを使用します。
では送信ボタンと送信ボタンのコードと実際のボタンを見てみましょう
<form id="srch">
<input type="button" value="表示" onClick="search(srch)">
</form>このボタンはわざとonClickを抜いてますのでまだ何も出来ないのですが、このonClickの部分で「このformを実行しますよ」ということになり、このformにJavaScriptを付けてあげる事で、リストの情報を送信するようにします。
ではそのJavaScriptの付け方の説明に入ります。
ボタンを押した際のJavaScript
JavaScriptの動きの流れとして、まず、JavaScriptを書きます。次に対象のボタンが押された時に、そのJavaScriptが動作する、という流れになります。
今回の場合、ボタンを押した時にJavaScriptが動作するようにするために、formタグのidを使います。
まずはコードを見てください。
<script type="text/javascript">
function search(srch){
var sel = document.forms.form1.selist;
if(sel.options[sel.selectedIndex].value == "41"){
location.href = "../4/4-1.html";
}else if(sel.options[sel.selectedIndex].value == "42"){
location.href = "../4/4-2.html";
}else if(sel.options[sel.selectedIndex].value == "43"){
location.href = "../4/4-3.html";
}else if(sel.options[sel.selectedIndex].value == "44"){
location.href = "../4/4-4.html";
}else if(sel.options[sel.selectedIndex].value == "45"){
location.href = "../4/4-5.html";
}else if(sel.options[sel.selectedIndex].value == "51"){
location.href = "../5/5-1.html";
}else if(sel.options[sel.selectedIndex].value == "52"){
location.href = "../5/5-2.html";
}else if(sel.options[sel.selectedIndex].value == "53"){
location.href = "../5/5-3.html";
}else if(sel.options[sel.selectedIndex].value == "54"){
location.href = "../5/5-4.html";
}else if(sel.options[sel.selectedIndex].value == "55"){
location.href = "../5/5-5.html";
}
}
</script>このJavaScriptを読み込ませてあげ、ボタンを押すことで、実際に選択しているリストへリンクします。
ではこのJavaScriptを解説します。
<script type="text/javascript">
この部分では「これからscriptタグで囲む範囲はJavaScriptですよ」という宣言になります。
これはどのJSを使うにも共通で使えるので、そのまま暗記した方が楽だと思います。
function search(srch){
この部分は「関数を記載しますよ」という意味になります。
search(srch)の部分ではsearch=関数名、srch＝対象になるformのidもしくはnameになっています。
つまりsrchがidのパーツ=ボタンが入ってるformなので、ボタンが入ってるformに対してのJavaScriptになります。
また、ボタンのところにもonClick="srch"が入っているので、ボタンをクリックした時にsrchが読み込まれ、そのsrchが読み込まれる＝JavaScriptが読み込まれるのでボタンをクリックするとJavaScriptが動作するという仕組みです。
var sel = document.forms.form1.selist
この部分はvarで変数宣言を意味します。
VBAで言うところのDimですね。
次のselは変数になるのでわかりやすい名前なら何でもOKです。
次のdocument.forms.form1.selistの部分は
現在のページ.HTML中のフォーム.リストが入ってるフォーム.リストというようになっています。
この3点をまとめると「selという変数にこのページのHTMLのformの中から、form1というformのsel1というidを持ったタグを代入してください。」となります。
これを毎回書くと長いのでまとめてselの変数に代入するわけですね。
また、基本的な文法としてはdocument.forms.formタグのidかname.selectタグのidかnameとなります。
formタグとselectタグのidとnameはどちらを記載しても大丈夫です。
例1）document.forms.formのid.selectのid
例2）document.forms.formのname.selectのname
例3）document.forms.formのid.selectのname
例4）document.forms.formのname.selectのidif(sel.options[sel.selectedIndex].value == "41"){
ここがわかりにくいと思います。
まず「if」は大丈夫ですよね?
単純な「もしも」の部分になります。
「sel.options[sel.selectedIndex].value」
ここが重要で、上記の部分を日本語で訳すと「変数selのリスト[○番目]の値」ということになります。
つまり選んでいるリストがどれかを特定します。
次にJavaScriptでは等号は「==」になるので、「選んでいるリストの値=42の時」という部分になります。
ついでにJavaScriptの不等号は「!=」になります。
location.href = "../../4/4-1.html";
ここも日本語に訳すと「行きます.このリンクに = "../../4/4-1.html";」
ということになるので、読みやすくまとめると「このリンクに行きますよ =
この部分は単純なリンクなのであんまり難しくないと思います。
ここからは延々とelse ifになり、「==」の後の数字とリンク先が変わっただけの同じコードが続くようになります。
つまり選ばれているリストのvalueと同じifの内容が実行されるようになるのです。