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版)

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について