46
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

セレクトボックスから項目を選択するだけでリンク先にジャンプさせる方法

Posted at

##方法
optionタグのvalue属性にURLを指定して、その値をlocation.hrefにセットする。

##html
optionのvalueにジャンプさせたいURLを指定する。
onchange()は内容が変化したら発生するイベント。

index.html
<form name="sort_form">
	<select name="sort" onchange="dropsort()">
		<option value=""> --- 選択してください --- </option>
		<option value="">Google</option>
		<option value="">Yahoo</option>
		<option value="">msn</option>
	</select>
</form>

##Javascript
Javascriptで行き先をリンク化する

sort.js
function dropsort() {
	var browser = document.sort_form.sort.value;
	location.href = browser
}

これで上手くいきます。
dropdownで選んでからボタンを押してsubmitとかをしたくないときに便利です。

##参考サイト
JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

46
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
45

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?