【JavaScript】プルダウンメニューを選択しただけで、画面遷移をさせる。

こんにちは。

結構実用的（というかよくみる）学習まで進んできました。

まずはプルダウンメニューを選択したあと、
ボタンを押下して画面遷移をさせる方法

<form name="pullForm">

	<select name="pullMenu">
		<option value="a.html">aへ遷移</option>
		<option value="b.html">bへ遷移</option>
		<option value="c.html">cへ遷移</option>
	</select>

	<input type="button" value="クリック" onclick="screenChange()"> 
</form>

function screenChange(){
	pullSellect = document.pullForm.pullMenu.selectedIndex ;
	location.href = document.pullForm.pullMenu.options[pullSellect].value ;
}

html <select><option>~</option></select>
これでプルダウンメニューを設置して、各optionのvalueにリンク先を示す。

js pullSellect = document.pullForm.pullMenu.selectedIndex ;
selectedIndexは要素内にある要素に配列を[0]から与えるので、
js location.href = document.pullForm.pullMenu.options[pullSellect].value ;
要素内にある要素内を参照するoptionsに格納する。

あとはHTMLのinput要素内にonclickでOK。

これがボタンを設置した場合。

では、ボタンではなくプルダウンを選択した時点で
画面遷移をさせるにはどうするか。

jsはそのままで、

<form name="pullForm">
	<select name="pullMenu" onChange="screenChange()">
		<option value="a.html">aへ遷移</option>
		<option value="b.html">bへ遷移</option>
		<option value="c.html">cへ遷移</option>
	</select>
</form>

要素内に js onChange="~()" をいれるだけです。

さてさて、ここで考えることが1つ。
ではユーザビリティ的にはどちらがいいのかと考える今日この頃です。

ネストして応用が効きそう。

それではこれからも宜しくお願いいたします。