jQuery プルダウンでページ遷移
プルダウンから直接遷移、プルダウンを選択しボタンで遷移
jQuery
$(function () {
// プルダウン変更時に遷移
$('select[name=pulldown1]').change(function() {
if ($(this).val() != '') {
window.location.href = $(this).val();
}
});
// ボタンを押下時に遷移
$('#location').click(function() {
if ($(this).val() != '') {
window.location.href = $('select[name=pulldown2]').val();
}
});
});
JavaScript版
JavaScript
window.addEventListener('load', function() {
// プルダウン変更時に遷移
// <select id="pulldown1">
var elem1 = document.getElementById('pulldown1');
elem1.addEventListener('change', function() {
if (elem1.selectedIndex != 0) {
top.location.href = elem1.options[elem1.selectedIndex].value;
}
});
// ボタンを押下時に遷移
document.getElementById('location').addEventListener('click', function() {
// <select id="pulldown2">
var elem2 = document.getElementById('pulldown2');
if (elem2.selectedIndex != 0) {
top.location.href = elem2.options[elem2.selectedIndex].value;
}
});
});
HTML
<!--プルダウン変更時-->
<select name="pulldown1">
<option value="">移動先を選択</option>
<option value="/category/php">PHP</option>
<option value="/category/jquery">jQuery</option>
</select>
<!--ボタンを押下時-->
<select name="pulldown2">
<option value="">移動先を選択</option>
<option value="/category/php">PHP</option>
<option value="/category/jquery">jQuery</option>
</select>
<input type="button" id="location" value="移動">
サンプル（jQuery版）
