結合/接続されたダイナミックドロップダウン

Question

ありがとうございましたStackoverflow Veterans、

小さな入力保護機能で少し苦労しました。基本的に、私のウェブサイトのユーザーは、朝のシフトを開始して終了する時間を選択することになります。

私は2つの入力を持っており、ループ内にはdateが入力されています。基本的に、私が達成しようとしていることは、誰かが "Start Time"ドロップダウンから開始日を選ぶと、 "End Time"ドロップダウンが "Start Time"よりも低いすべての値を持つことです。

私は、より良い説明をするために、以下のイメージを提供しました。私の現在のコードは、selectがどのように動作しているかに関しても同様です。

Javascriptの進捗状況は基本的にはありません。私が試したことのないものはすべて動作し、私は新しいアイデアを考えるのに苦労し始めています。 StackOverflowで解決策を見つけようと多くの時間を費やしましたが、間違ったキーワードで検索している可能性があります。

<select id="mondayWorking_MorningStart" class="workInput" > 
    <?php 
    $tStart = strtotime($start); 
    $tEnd = strtotime($end); 
    $tNow = $tStart; 

    while($tNow <= $tEnd) 
    { 
     echo "<option id='monday_MorningStart' name='mondayMorningStart'>" . date("H:i",$tNow) . "</option>"; 
     $tNow = strtotime('+30 minutes',$tNow); 
    } 
    ?> 
</select> 

The start time has been selected on the Left Dropdown, at 07:00, but on the Right Dropdown, anything before 07:00 should now be removed/disabled.

は、あなたがあなたの助けを提供するために何かを必要とする場合

は、私に知らせてください、あなたの助けをありがとう！

Answer 1

最初のドロップダウン値に基づいて2番目のドロップダウンを設定するには、最初にonChangeイベントを最初のドロップダウンにバインドする必要があります。つまり、最初のドロップダウンを変更して別のオプションを選択すると、JavaScript（ここではjquery）はイベントを発生させてコードを実行します。

この関数（コード）では、最初のドロップダウンの値を取得してから、2番目のドロップダウンのオプションをクリアし、最初のドロップダウン値に基づいて2番目のドロップダウンの内容を補充します。

私は2番目のドロップダウン最大値は24:00にすることができ、最小値が+ 30分最初のドロップダウン値に等しくなければならないことを想定し...

私は最初を選択するためにいくつかのオプションを追加しましたテスト。

だからコードは次のようになります...あなたはあなたのPHPコードでそれをロードしていると、それは違いはありません：

$('#selStart').change(function(){ 
 
    var arrTimeStart = $(this).val().split(":"); 
 
    var timeStart = parseInt(arrTimeStart[0] * 60) + parseInt(arrTimeStart[1]); 
 
    timeStart = timeStart + 30; 
 
    var timeEnd = (24 * 60); 
 
    
 
    $('#selEnd').find('option').remove(); 
 
    for (iCnt = timeStart; iCnt <= timeEnd; iCnt = iCnt + 30){ 
 
    vHour = parseInt(iCnt/60); 
 
    vMin = iCnt % 60; 
 
    if(vMin == 0) 
 
     vMin = '00'; 
 
    tmpTime = vHour + ':' + vMin; 
 
    $('#selEnd').append('<option value='+tmpTime+'>'+tmpTime+'</option>'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Start: 
 
<select id="selStart"> 
 
    <option value="00:00">00:00</option> 
 
    <option value="00:30">00:30</option> 
 
    <option value="01:00">01:00</option> 
 
    <option value="01:30">01:30</option> 
 
    <option value="02:00">02:00</option> 
 
    <option value="02:30">02:30</option> 
 
    <option value="03:00">03:00</option> 
 
    <option value="03:30">03:30</option> 
 
    <option value="04:00">04:00</option> 
 
    <option value="04:30">04:30</option> 
 
</select> 
 
<br> 
 
End: 
 
<select id="selEnd"></select>