• 締切済み

2つのセレクトボックスを連動させたい

2つのセレクトボックスを連動させて、 片方の選択を変更すると、もう一方の選択できる範囲が限定されるようにしたい。 下記のようなソースでセレクトボックスを2つ表示させています。 jQueryを使用しています。 それぞれ「開始年」「終了年」という意味合いで、 取得する値から、「年の範囲」を決定するものです。「option」の「value」には、西暦の4桁の数字が入るようにしています。 そこで、「開始年」選択を変更させたときに、「終了年」のセレクトが開始年よりも古い年を選択できないように連動させたいのですが、何かいい方法はないでしょうか。 ※「送信」ボタンをクリックした際に、警告文を表示するのではなく、 2つのセレクトを連動される形で実現させたいと考えております。 ↓↓【記述コード】---------------------------------------------- 開始年:<select name="year_start" id="feas_1_1"></select> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = init_year; i <= year; i++) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_1').append('<option value="' + i + '">' + era + s +'年( '+ i+ '年)</option>'); } </script> 終了年:<select name="year_end" id="feas_1_2"></select> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = year; i >= init_year; i--) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_2').append('<option value="' + i + '">' + era + s +'年( '+ i + '年)</option>'); } </script>

みんなの回答

回答No.1

こんな感じで書いて見ましたがいかがでしょ。 JSの一番したに入れてみてください。 //選択されている年を取得し、数値に変換して配列にして返却 function get_selected_years (){ return [parseInt($("#feas_1_1").val(),  "10"), parseInt($("#feas_1_2").val(), "10")]; } //開始年を変更したときに走るイベント $('#feas_1_1').on("change", function(){ var selected_years = get_selected_years(); //開始年より終了年が古い場合 if (selected_years[0] > selected_years[1]){ if (year == selected_years[0]){ //開始年が現在年の場合は開始年と終了年を一緒にしておくことにしました。 $("#feas_1_2").val(selected_years[0]); }else{ //それ以外は終了年を(開始年+1)にします。 $("#feas_1_2").val(selected_years[0]+1); } } }); //終了念を変更したときに走るイベント $('#feas_1_2').on("change",function(){ var selected_years = get_selected_years(); //開始年より終了年が古い場合 if (selected_years[0] > selected_years[1]){ if (init_year == selected_years[1]){ //終了年が初期年の場合は開始年と終了年を一緒にしておくことにしました。 $("#feas_1_1").val(selected_years[1]); }else{ //それ以外は開始年を(終了年-1)にします。 $("#feas_1_1").val(selected_years[1]-1); } } });

すると、全ての回答が全文表示されます。

専門家に質問してみよう