htmlのエントリを非表示にする別の選択フィールドに基づいてフィールドを選択

Question

私は自分のhtmlフォームに2つの選択フィールドを持っています。 1つはピックアップレディタイム用で、もう1つは最新のピックアップタイム用です。

<label>What is the earliest Pickup time?</label><select name='PickupTime' required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='08:00:00'>8:00 AM</option> 
    <option value='08:30:00'>8:30 AM</option> 
    <option value='09:00:00'>9:00 AM</option> 
    <option value='09:30:00'>9:30 AM</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
</select> 
<label>What is the latest Pickup time?</label><select name='CloseTime' required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
    <option value='14:30:00'>2:30 PM</option> 
    <option value='15:00:00'>3:00 PM</option> 
    <option value='15:30:00'>3:30 PM</option> 
    <option value='16:00:00'>4:00 PM</option> 
    <option value='16:30:00'>4:30 PM</option> 
</select> 

ユーザーがReadyTimeフィールドから、将来的に少なくとも2時間であるCloseTimeファイルのための時間を選択しなければならないようにそれを作るための方法はありますか？

したがって、ユーザが午前11時の準備時間を選択した場合、クローズド時間フィールドの時間は1pmから開始されます（ただし、4:30までになります）。

これはjavascriptを見ていると思いますが、その言語はまったくわかりません。

ありがとう、みなさま、ありがとうございます。

Answer 1

<label>What is the earliest Pickup time?</label> 
<select name='PickupTime' onChange="updateCloseTime(this)" required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='08:00:00'>8:00 AM</option> 
    <option value='08:30:00'>8:30 AM</option> 
    <option value='09:00:00'>9:00 AM</option> 
    <option value='09:30:00'>9:30 AM</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
</select> 
<label>What is the latest Pickup time?</label> 
<select name='CloseTime' id="CloseTime" required> 
    <option value='' selected='selected'>(Select a Time)</option> 
    <option value='10:00:00'>10:00 AM</option> 
    <option value='10:30:00'>10:30 AM</option> 
    <option value='11:00:00'>11:00 AM</option> 
    <option value='11:30:00'>11:30 AM</option> 
    <option value='12:00:00'>12:00 PM</option> 
    <option value='12:30:00'>12:30 PM</option> 
    <option value='13:00:00'>1:00 PM</option> 
    <option value='13:30:00'>1:30 PM</option> 
    <option value='14:00:00'>2:00 PM</option> 
    <option value='14:30:00'>2:30 PM</option> 
    <option value='15:00:00'>3:00 PM</option> 
    <option value='15:30:00'>3:30 PM</option> 
    <option value='16:00:00'>4:00 PM</option> 
    <option value='16:30:00'>4:30 PM</option> 
</select> 

<script> 
    function updateCloseTime(PickupTime) { 
    var PickupTimeValueSplit = PickupTime.value.split(":"); 
    PickupTimeValueSplit[0] = Number(PickupTimeValueSplit[0]) + 2; 
    var valueToFind = PickupTimeValueSplit.join(":"); 
    var selectCloseTime = document.getElementById("CloseTime"); 
    var optionsList = Array.prototype.slice.call(selectCloseTime.options); 
    optionsList.forEach(function(element, index, array) { 
     if (element.value) { 
     if (Number(element.value.replace(/:/g,"")) < Number(valueToFind.replace(/:/g,""))) { 
      selectCloseTime.options[index].style.display = 'none'; 
     } 
     else { 
      selectCloseTime.options[index].style.display = 'block'; 
     } 
     } 
    }); 

    } 

</script> 

Answer 2

私はこのJavaScriptコードを作成して、あなたが初心者だと言っているので、非常にうまくコメントしようとしました。

//This function is called when the user chooses an option in the first form 
 
function adjustForm(selectForm){ 
 
    
 
    //Get the value of the chosen option 
 
    var optValue = selectForm.options[selectForm.selectedIndex].value; 
 
    
 
    //Failsafe 
 
    if(optValue == ""){return;} 
 
    
 
    //Get array of options from second form 
 
    var opts = document.getElementById("closeTime").options; 
 

 
    //Iterate through every option from second form 
 
    for(var opt, j = 0; opt = opts[j]; j++) { 
 
    
 
    //Failsafe 
 
    if(opt.value != ""){ 
 
    
 
     //And test them against the chosen option from form 1 
 
     if(parseInt(opt.value.match(/^0?(\d{1,2}):/)[1]) < parseInt(optValue.match(/^0?(\d{1,2}):/)[1]) + 2) { 
 
     
 
     //If they match, the option is deleted 
 
     document.getElementById("closeTime").remove(j); 
 
     
 
     j -= 1; 
 
     } 
 
    
 
    } 
 
    
 
    } 
 
}

<label>What is the earliest Pickup time? </label><select id="pickupTime" name='PickupTime' onchange="adjustForm(this);" required> 
 
    <option value='' selected='selected'>(Select a Time)</option> 
 
    <option value='08:00:00'>8:00 AM</option> 
 
    <option value='08:30:00'>8:30 AM</option> 
 
    <option value='09:00:00'>9:00 AM</option> 
 
    <option value='09:30:00'>9:30 AM</option> 
 
    <option value='10:00:00'>10:00 AM</option> 
 
    <option value='10:30:00'>10:30 AM</option> 
 
    <option value='11:00:00'>11:00 AM</option> 
 
    <option value='11:30:00'>11:30 AM</option> 
 
    <option value='12:00:00'>12:00 PM</option> 
 
    <option value='12:30:00'>12:30 PM</option> 
 
    <option value='13:00:00'>1:00 PM</option> 
 
    <option value='13:30:00'>1:30 PM</option> 
 
    <option value='14:00:00'>2:00 PM</option> 
 
</select> 
 
<label><br><br>What is the latest Pickup time? </label><select id="closeTime" name='CloseTime' required> 
 
    <option value='' selected='selected'>(Select a Time)</option> 
 
    <option value='10:00:00'>10:00 AM</option> 
 
    <option value='10:30:00'>10:30 AM</option> 
 
    <option value='11:00:00'>11:00 AM</option> 
 
    <option value='11:30:00'>11:30 AM</option> 
 
    <option value='12:00:00'>12:00 PM</option> 
 
    <option value='12:30:00'>12:30 PM</option> 
 
    <option value='13:00:00'>1:00 PM</option> 
 
    <option value='13:30:00'>1:30 PM</option> 
 
    <option value='14:00:00'>2:00 PM</option> 
 
    <option value='14:30:00'>2:30 PM</option> 
 
    <option value='15:00:00'>3:00 PM</option> 
 
    <option value='15:30:00'>3:30 PM</option> 
 
    <option value='16:00:00'>4:00 PM</option> 
 
    <option value='16:30:00'>4:30 PM</option> 
 
</select>

スクリプトは単にpickupTimeで選択されたオプションの時間を取得します。次に、closeTimeの各オプションの時間を取得し、pickupTime時間よりも小さいかどうかを確認するために、pickupTime時間と個別にテストを開始します。小さい場合は、オプションから削除する必要があります。

私はif(parseInt(opt.value.match(/^0?(\d{1,2}):/)[1]) <= parseInt(optValue.match(/^0?(\d{1,2}):/)[1]) + 2)行があなたが理解するのが最も難しいと思います。実際には、オプションから値を取り出し、論理テストに使用できる数値に変換します。

それはこのような何かとります

09:30:00 

をそして、これに変換します：

9 

あなたは私はあなたが知っているかわからない何の手段をちんぷんかんぷんそのすべて（お知りになりたい場合はどのような正規表現）、this websiteで説明します。

それ以外の場合は、このスクリプトはあなたを適切な方向に導くためにのみ作成されています。

1） JavaScriptがオプションを削除すると、戻すことはできません。したがって、ユーザーが最初に夕方に遅い時間を選択してから、気が変わって早く何かを選択すると、JavaScriptはすでに後期オプションを削除してしまい、戻すことができなくなります。したがって、別の場所に別のオプションを格納しなければならないので、JavaScriptはそれらを記憶しておき、必要に応じて再度挿入することができます。

2） 現在のところ、JavaScriptでは1時間しか表示されません。あなたがpickupTimeとして4:30を選択し、その後もcloseTimeオプションとして6:00を得ることを意味します。おそらくそれはあなたにとって重要ではないかもしれませんが、もしそれがあれば、分を含めるためにさらに正規表現の魔法を行うか、タイムスタンプに変換してそれらを比較する必要があります。

私はこれがあなたを助けたと思う：D