html의 항목을 숨기려면 다른 선택 필드를 기반으로 필드를 선택하십시오.

Question

내 HTML 양식에 2 개의 선택 필드가 있습니다. 하나는 픽업 준비 시간이고 하나는 최신 픽업 시간입니다.

<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시에 준비 시간을 선택한 경우 휴면 시간 필드의 시간은 오후 1시에 시작되지만 (여전히 4시 30 분으로 만 진행됨).

나는 이것이 주위를 둘러 보지 않고 자바 스크립트를 사용한다고 생각하지만, 나는 그 언어를 전혀 모른다.

감사합니다. 고맙습니다.

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 코드를 작성했으며, 초급자라고 말하기 때문에이 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는 한시간 만 보입니다. 즉, 4시 30 분을 pickupTime으로 선택한 다음 여전히 6시를 closeTime 옵션으로 사용할 수 있다는 의미입니다. 어쩌면 그건 당신에게 중요하지 않겠지 만, 분이 포함되도록 더 많은 정규 표현식 매직을 수행하거나 대신 시간 소인으로 변환 한 다음 비교해야합니다.

이 도움이 되었기를 바랍니다. D