【javascript・jQuery】2つのselectboxを連動させて、片方の選択肢によって選択肢の順番を変えたい

お世話になっております。

###前提・実現したいこと
2つの時間を選択するselectboxを連動させて、片方の選択肢によって選択肢の順番を変えたい、かつ、片方で選択した時間はもう片方で出ないようにしたいです。
例えば、左のselectboxを「14：00」に変更した際には、右のselectboxの選択肢のデフォルトが「15：00」になっているように、かつ、右の選択肢には「14：00」が表示されないようにしたいです。

###試したこと
http://oshiete.goo.ne.jp/qa/4628625.html
上記URLの方法を試したのですが、
こちらですと左で「7:00」を選択した際に、右では「0：00」〜「6：00」が選択できず、
また、左で「23：00」を選択した際には右に何も表示されませんでした…
ご教授いただけると幸いです。

下記コードは、上記のURLを試した際のものです。

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

html
1          <div class="inner_content fl_inner editcheckchange mt10">
2          <select class="form-parts w80"  name="selectedate-h" id="starthour" onChange="setEndHour(this.value);">
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" onChange="setStartHour(this.value);">
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>
56

javascript
1// JavaScript Document
2function setStartHour(hour) {
3var shourvalue = document.getElementById('starthour').value;
4var shr;
5var cnt = 0; // 追加
6
7// 初期化
8document.getElementById("starthour").length = 0;
9// 「6時＜選択された終了時間」を選択肢とする
10for (shr = 0; shr < hour; shr++) {
11// <option>を追加
12document.getElementById("starthour").options[cnt] = new Option(shr + ':00', shr);
13console.log(shr);
14// 
15if (shr == shourvalue) {
16document.getElementById("starthour").options[cnt].selected = true;
17}
18cnt++;
19}
20
21}
22function txtClose () {
23if (document.f_frm.motive[5].checked) {
24document.f_frm.motive_add.disabled = false;
25	} else {
26		document.f_frm.motive_add.disabled = true;
27	}
28}
29
30function setEndHour(hour) {
31		var ehourvalue = document.getElementById('endhour').value;
32		var ehr;
33		var fromhour = ++hour;
34		var cnt = 0; // 追加
35		// 初期化
36		document.getElementById("endhour").length = 0;
37		// 「選択された開始時間＜24時」を選択肢とする
38		for (ehr = fromhour; ehr < 24; ehr++) {
39		// <option>を追加
40		document.getElementById("endhour").options[cnt] = new Option(ehr + ':00', ehr);
41		cnt++;
42		}
43}

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

回答2件

ベストアンサー

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  });
6

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 05:11

yambejp

総合スコア114839

miyoshi_work

2016/09/29 07:12

こちらで動作致しました。 selectedIndexというプロパティがあったのですね…勉強になります素早いご回答ありがとうございました！

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

※質問をよく読まないまま書いてしまいました。。


   <div class="inner_content fl_inner editcheckchange mt10">
        <select class="form-parts w80" name="selectedate-h" id="starthour">
                <option value="6">6:00</option>
                <option value="7">7:00</option>
                <option value="8">8:00</option>
                <option value="9">9:00</option>
                <option value="10">10:00</option>
                <option value="11">11:00</option>
                <option value="12">12:00</option>
                <option value="13">13:00</option>
                <option value="14">14:00</option>
                <option value="15">15:00</option>
                <option value="16">16:00</option>
                <option value="17">17:00</option>
                <option value="18">18:00</option>
                <option value="19">19:00</option>
                <option value="20">20:00</option>
                <option value="21">21:00</option>
                <option value="22">22:00</option>
                <option value="23">23:00</option>
                <option value="24">0:00</option>
                <option value="1">1:00</option>
                <option value="2">2:00</option>
                <option value="3">3:00</option>
                <option value="4">4:00</option>
                <option value="5">5:00</option>
        </select> 〜
        <select class="form-parts w80" name="selectedate-h02" id="endhour">
                <option value="7">7:00</option>
                <option value="8">8:00</option>
                <option value="9">9:00</option>
                <option value="10">10:00</option>
                <option value="11">11:00</option>
                <option value="12">12:00</option>
                <option value="13">13:00</option>
                <option value="14">14:00</option>
                <option value="15">15:00</option>
                <option value="16">16:00</option>
                <option value="17">17:00</option>
                <option value="18">18:00</option>
                <option value="19">19:00</option>
                <option value="20">20:00</option>
                <option value="21">21:00</option>
                <option value="22">22:00</option>
                <option value="23">23:00</option>
                <option value="24">00:00</option>
                <option value="1">1:00</option>
                <option value="2">2:00</option>
                <option value="3">3:00</option>
                <option value="4">4:00</option>
                <option value="5">5:00</option>
                <option value="6">6:00</option>
        </select>
    </div>

//javascritpt

$('select').on('change', function() {
            var selectVal = parseInt($(this).val()); //選択されたoptionのvalueを取得

            var targetObj = isSelf($(this), selectVal); //optionを変更するselect要素を決定する

            var targetVal = valAjust(targetObj, selectVal); //変更するvalueを調整する

            $('#' + targetObj).val(targetVal); //調整したvalueに変更する
        });


        function isSelf(obj) {
            var startHour = $('#starthour').attr('id');
            var endHour = $('#endhour').attr('id');
            var tmp;

            if (obj.attr('id') == startHour) { //選択されたselect要素の対になるselect要素を格納する
                tmp = endHour;
            } else {
                tmp = startHour;
            }

            return tmp;
        }

        function valAjust(targetObj, selectVal) {
            var tmp;
            if (targetObj == 'endhour') { //相手がendhourなら+1、そうでないなら-1
                tmp = selectVal + 1;
            } else {
                tmp = selectVal - 1;
            }

            if (tmp == 25) { //value 25 は存在しないので1にする
                tmp = 1;
            }

            if (tmp == 0) { //value 0 は存在しないので24にする
                tmp = 24;
            }

            return tmp;
        }

投稿2016/09/29 06:34