【jQuery】selectboxを連動し、片方の選択肢によって片方の選択肢のoptionの一部を非表示にしたい

お世話になっております。何度も申し訳ございません。。

###前提・実現したいこと
下記ソースコードにて、
左selectboxが「6:00」〜「5:00」
右selectboxが「7:00」〜「6:00」
の選択肢になっています。

例えば、
左で「10:00」を選択した際には、
右の選択肢から「7:00」〜「10:00」を消す、
左で「21:00」を選択した際には、
右の選択肢から「7:00」〜「21:00」を消す、

というものを作りたいです。

「7:00」〜「10:00」の部分をどう選択していいかわからずご教授いただけると幸いです。。

https://teratail.com/questions/49695
こちらにて先ほど質問させていただきまして、ご回答いただきました内容にて一度はOKが出たのですが、動作の変更があり何度もご質問することになり大変申し訳ないです。。

http://oshiete.goo.ne.jp/qa/4628625.html
↑今度こそこちらの方法の応用でうまくいくかと思いましたが、
「0：00」や「1：00」が「24：00」「25：00」という表記になってしまい、
valueを変えるとoptionの順番がおかしくなってしまい。。といった具合でした。。

下記コードは先ほどご回答いただきましたソースコードになります。
（回答そのまま流用で申し訳ございません。）

###該当のソースコード

javascript
1$('#starthour').on('change',function(){
2    $('#endhour option').show();
3    $('#endhour').prop('selectedIndex',$(this).prop('selectedIndex'));
4    $('#endhour option[value='+$(this).val()+']').hide();
5  });

html
1<div class="inner_content fl_inner editcheckchange mt10">
2<select class="form-parts w80"  name="selectedate-h" id="starthour">
3<option value="6">6:00</option>
4<option value="7">7:00</option>
5<option value="8">8:00</option>
6<option value="9">9:00</option>
7<option value="10">10:00</option>
8<option value="11">11:00</option>
9<option value="12">12:00</option>
10<option value="13">13:00</option>
11<option value="14">14:00</option>
12<option value="15">15:00</option>
13<option value="16">16:00</option>
14<option value="17">17:00</option>
15<option value="18">18:00</option>
16<option value="19">19:00</option>
17<option value="20">20:00</option>
18<option value="21">21:00</option>
19<option value="22">22:00</option>
20<option value="23">23:00</option>
21<option value="24">0:00</option>
22<option value="1">1:00</option>
23<option value="2">2:00</option>
24<option value="3">3:00</option>
25<option value="4">4:00</option>
26<option value="5">5:00</option>
27</select>
28?
29<select class="form-parts w80" name="selectedate-h02" id="endhour">
30<option value="7">7:00</option>
31<option value="8">8:00</option>
32<option value="9">9:00</option>
33<option value="10">10:00</option>
34<option value="11">11:00</option>
35<option value="12">12:00</option>
36<option value="13">13:00</option>
37<option value="14">14:00</option>
38<option value="15">15:00</option>
39<option value="16">16:00</option>
40<option value="17">17:00</option>
41<option value="18">18:00</option>
42<option value="19">19:00</option>
43<option value="20">20:00</option>
44<option value="21">21:00</option>
45<option value="22">22:00</option>
46<option value="23">23:00</option>
47<option value="24">00:00</option>
48<option value="1">1:00</option>
49<option value="2">2:00</option>
50<option value="3">3:00</option>
51<option value="4">4:00</option>
52<option value="5">5:00</option>
53<option value="6">6:00</option>
54</select>
55</div>

退会済みユーザー

2016/09/29 09:16

そのロジックを実装したい背景（どういうサービスなのか、さらに言うと営業時間などの条件など。）を差し支えない範囲で教えていただけるともっと適切な回答ができる、気がします。。

行動規範の内容に同意します

回答4件

ベストアンサー

たとえばこんな感じでしょうか？

javascript
1$(function(){
2  $('#starthour').on('change',function(){
3    $('#endhour option').show().each(function(){
4      if($('#endhour option').index(this) < $('#starthour').prop('selectedIndex')){
5        $(this).hide();
6      }
7    });
8    $('#endhour').prop('selectedIndex',$(this).prop('selectedIndex'));
9  });
10});
11

投稿2016/09/29 09:36

yambejp

総合スコア114839

miyoshi_work

2016/09/29 10:18

何度もありがとうございます！ eachは使えないか試みたのですがうまくいかなかったので大変ためになります。ありがとうございました

行動規範の内容に同意します

javascript
1$('#starthour').on('change',function(){
2    $('#endhour option').show();
3    let selectedIndex = $(this).prop('selectedIndex');
4    $('#endhour').prop('selectedIndex', selectedIndex);
5    let options = $('#endhour option');
6    for (let i = 0; i < selectedIndex; i++) {
7       $(options[i]).hide();
8    }
9});

こんなのではどうでしょう？

投稿2016/09/29 09:19

tkturbo

総合スコア5572

miyoshi_work

2016/09/29 10:15

ご回答ありがとうございました！ letという宣言が初めて聞くものでした…勉強になります。ただこちら、テストしたところ自分の書き方が悪いのか、うまく動作しませんでした… ご回答いただきましたのに申し訳ないです。。

tkturbo

2016/09/29 10:19

firefoxでは動いているのですが、ieですか？

miyoshi_work

2016/09/29 10:25

qromeのバージョン 53.0.2785.116 (64-bit)です。 firefox 48.0で確認しても動作しなかったのですがやはりソースの書き方の問題でしょうか… consoleにエラーは出ておりません。

行動規範の内容に同意します

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<select name="from" id="from">
9		</select>
10		<select name="to" id="to">
11		</select>
12	</body>
13	<script type="text/javascript" src="//code.jquery.com/jquery-2.2.4.min.js"></script>
14	<script type="text/javascript">
15		$(function () {
16			for (var i = 0; i < 24; i++) {
17				var hour = (i + 6) % 24;
18				$("<option>").val(hour)
19						.text(hour + ':00')
20						.attr('data-hour', i + 6)
21						.appendTo($("#from"));
22			}
23			$("#from").on('change', function () {
24				$("#to").empty();
25				var selectedHour = $(this).find(':selected').attr('data-hour');
26				for (var i = 0; i < 24; i++) {
27					var hour = (i + 7) % 24;
28					if (selectedHour < i + 7) {
29						$("<option>").val(hour)
30								.text(hour + ':00')
31								.attr('data-hour', i + 7)
32								.appendTo($("#to"));
33					}
34				}
35			});
36		});
37	</script>
38</html>

投稿2016/09/29 09:16

退会済みユーザー

総合スコア0

miyoshi_work

2016/09/29 10:11

ご回答ありがとうございました！インクリメントのループは非常に苦手なので勉強になります…

行動規範の内容に同意します

IEのoptionは非表示にできないので、IEサポートする場合は、
Kosuke_Shibuyaさんのご回答の方法がよいと思います。

javascript
1
2$("#starthour").on("change", function () {
3    $("#endhour").find("option").show()
4    .not(":last-child").filter("[value=" + $(this).val() + "]").hide()
5    .prevAll().hide();
6    if ($("#endhour").prop("selectedIndex") < this.selectedIndex) {
7        $("#endhour").prop("selectedIndex", this.selectedIndex)
8    }
9});