как скрыть и показать выпадающее меню в соответствии с другим выпадающим списком

-2

Я пытаюсь манипулировать значениями выпадающего списка с помощью другого. Ниже приведен полный код. Значения по существу - это просто время в час.как скрыть и показать выпадающее меню в соответствии с другим выпадающим списком

  <!-- start --> 
    <div id="start"> 
     <p>Start time</p> 
     <select name="select1" id="select1" > 
      <option value="8:00">8:00</option> 
      <option value="8:30">8:30</option> 
      <option value="9:00">9:00</option> 
      <option value="9:30">9:30</option> 
      <option value="10:00">10:00</option> 
      <option value="10:30">10:30</option> 
      <option value="11:00">11:00</option> 
      <option value="11:30">11:30</option> 
      <option value="12:00">12:00</option> 
      <option value="12:30">12:30</option> 
      <option value="13:00">13:00</option> 
      <option value="13:30">13:30</option> 
      <option value="14:00">14:00</option> 
      <option value="14:30">14:30</option> 
      <option value="15:00">15:00</option> 
      <option value="15:30">15:30</option> 
      <option value="16:00">16:00</option> 
      <option value="16:30">16:30</option> 
      <option value="17:00">17:00</option> 
      <option value="17:30">17:30</option> 
      <option value="18:00">18:00</option> 
      <option value="18:30">18:30</option> 
      <option value="19:00">19:00</option> 
      <option value="19:30">19:30</option> 
      <option value="20:00">20:00</option> 
      <option value="20:30">20:30</option> 
      <option value="21:00">21:00</option> 
      <option value="21:30">21:30</option> 
     </select> 
    </div> 


      <!--end time --> 
    <div id="end"> 
     <p>End time</p> 
     <select name="select2" id="select2"> 
      <option value="8:30">8:30</option> 
      <option value="9:00">9:00</option> 
      <option value="9:30">9:30</option> 
      <option value="10:00">10:00</option> 
      <option value="10:30">10:30</option> 
      <option value="11:00">11:00</option> 
      <option value="11:30">11:30</option> 
      <option value="12:00">12:00</option> 
      <option value="12:30">12:30</option> 
      <option value="13:00">13:00</option> 
      <option value="13:30">13:30</option> 
      <option value="14:00">14:00</option> 
      <option value="14:30">14:30</option> 
      <option value="15:00">15:00</option> 
      <option value="15:30">15:30</option> 
      <option value="16:00">16:00</option> 
      <option value="16:30">16:30</option> 
      <option value="17:00">17:00</option> 
      <option value="17:30">17:30</option> 
      <option value="18:00">18:00</option> 
      <option value="18:30">18:30</option> 
      <option value="19:00">19:00</option> 
      <option value="19:30">19:30</option> 
      <option value="20:00">20:00</option> 
      <option value="20:30">20:30</option> 
      <option value="21:00">21:00</option> 
      <option value="21:30">21:30</option> 
      <option value="22:00">22:00</option> 
     </select>

Моя цель состоит в том, чтобы убедиться, что выпадающий список под названием EndTime изменяет свои значения в соответствии с тем, что я выбираю в списке под названием время_запуска. Например: если во время запуска я выбираю значение 10:00 часов, список времени окончания должен показывать только часы через 10:30 и скрыть часы до 10:00. Поэтому я в основном хочу, чтобы время начала всегда было до конца.

Должно быть также ограничение по времени максимум 2 часа. Например: если я выбираю 10: 00hrs во время начала, я могу выбрать только значения до 12:00 и ниже в списке времени окончания.

Я не могу понять, как это сделать с помощью обычного JavaScript, поскольку я новичок.

источник

2016-07-01 Madan Gurung

я доска

<html><head><script> 
var times = ["8:00","8:30","9:00","9:30","10:00","10:30","11:00", 
"11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00", 
"15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00", 
"19:30","20:00","20:30","21:00","21:30","22:00"]; 
var start,end; 
function onLoad(){ 
start = document.getElementById('start'); 
end = document.getElementById('end'); 
for(var i=0;i<times.length-1;i+=1) 
    start.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>'; 
for(var i=1;i<times.length;i+=1) 
    end.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>'; 
end.value = '22:00'; 
} 
function buildStart(){ 
var val = start.value; 
start.innerHTML = ''; 
for(var i=0;i<times.indexOf(end.value);i++) 
    start.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>'; 
start.value = val; 
} 
function buildEnd(){ 
var val = end.value; 
end.innerHTML = ''; 
for(var i=times.indexOf(start.value)+1;i<times.length;i++) 
    end.innerHTML += '<option value="'+times[i]+'">'+times[i]+'</option>'; 
end.value = val; 
} 
</script></head><body onload="onLoad();"> 
<select id="start" onchange="buildEnd();"></select> 
<select id="end" onchange="buildStart();"></select> 
</body></html>

Подводя итог, хотя:

1) Вы хотите создавать более крупные варианты со сценарием, а не вручную.

2) Если вы сохраняете свои значения в массиве, таком как этот код здесь, вы можете легко проверить, имеет ли одно значение меньшее/большее, чем другое.

3) Этот вопрос кажется действительно ленивым.

Hard Mode ~~ ~~

Избавиться от уродливых массива на вершине с это:

var times = []; 
for(var i=8;i<22.5;i+=0.5) 
times.push((i.toFixed(2)+'').split('.').join(':'));

источник

2016-07-02 01:23:00 ElDoRado1239

привет, благодарю за вашу помощь, вы код работает очень хорошо. –

рад, что смогу помочь – ElDoRado1239

Я не привык к этому, потому что это скорее код, чем я пробовал все проблемы.

Я бы оставил ваше время начала, как есть, но динамически добавляет время окончания в зависимости от выбора времени начала.

Время регистрации начала
На функции изменения запуска события
В рамках функции получения значения времени начала и создать цикл до 12
В рамках этой функции динамически добавлять опции к уже созданной капле выбора вниз

Посмотрите here

источник

2016-07-02 00:19:48

Вот функция, генерирует массив временных интервалов для выпадающего списка времени окончания в соответствии с вашими требованиями.

Теперь все, что вам нужно сделать, это прикрепить созданный массив из раскрывающегося списка myFunc to endTime.

<script> 
function myFunc(value){ 
        // parse the value "10:30" to individual hour & minutes 
        var startHour = parseInt(value.split(':')[0]); 
        var startMinute = parseInt(value.split(':')[1]); 

        var endTimeList = []; 
        var newArrayCount = 0; 

        for(var i = startHour; i <= startHour + 2; i++){ 

         endTimeList[newArrayCount] = i + ":00"; 
         newArrayCount++; 
         endTimeList[newArrayCount] = i + ":30"; 
         newArrayCount++; 
        } 

        endTimeList.shift(); // remove first value 

        // remove first or last value from array based on minute timing 
        if(startMinute != 0){ 
         endTimeList.shift(); 
        }else{ 
         endTimeList.pop(); 
        } 

        console.log(endTimeList.toString()); 
       } 
</script> 

<div id="start"> 
    <p>Start time</p> 
    <select name="select1" id="select1" onChange="myFunc(this.value)"> 
     <option value="8:00">8:00</option> 
     <option value="8:30">8:30</option> 
     <option value="9:00">9:00</option> 
     <option value="9:30">9:30</option> 
     <option value="10:00">10:00</option> 
     <option value="10:30">10:30</option> 
     <option value="11:00">11:00</option> 
     <option value="11:30">11:30</option> 
     <option value="12:00">12:00</option> 
     <option value="12:30">12:30</option> 
     <option value="13:00">13:00</option> 
     <option value="13:30">13:30</option> 
     <option value="14:00">14:00</option> 
     <option value="14:30">14:30</option> 
     <option value="15:00">15:00</option> 
     <option value="15:30">15:30</option> 
     <option value="16:00">16:00</option> 
     <option value="16:30">16:30</option> 
     <option value="17:00">17:00</option> 
     <option value="17:30">17:30</option> 
     <option value="18:00">18:00</option> 
     <option value="18:30">18:30</option> 
     <option value="19:00">19:00</option> 
     <option value="19:30">19:30</option> 
     <option value="20:00">20:00</option> 
     <option value="20:30">20:30</option> 
     <option value="21:00">21:00</option> 
     <option value="21:30">21:30</option> 
    </select> 
</div> 


     <!--end time --> 
<div id="end"> 
    <p>End time</p> 
    <select name="select2" id="select2"> 
     <option value="8:30">8:30</option> 
     <option value="9:00">9:00</option> 
     <option value="9:30">9:30</option> 
     <option value="10:00">10:00</option> 
     <option value="10:30">10:30</option> 
     <option value="11:00">11:00</option> 
     <option value="11:30">11:30</option> 
     <option value="12:00">12:00</option> 
     <option value="12:30">12:30</option> 
     <option value="13:00">13:00</option> 
     <option value="13:30">13:30</option> 
     <option value="14:00">14:00</option> 
     <option value="14:30">14:30</option> 
     <option value="15:00">15:00</option> 
     <option value="15:30">15:30</option> 
     <option value="16:00">16:00</option> 
     <option value="16:30">16:30</option> 
     <option value="17:00">17:00</option> 
     <option value="17:30">17:30</option> 
     <option value="18:00">18:00</option> 
     <option value="18:30">18:30</option> 
     <option value="19:00">19:00</option> 
     <option value="19:30">19:30</option> 
     <option value="20:00">20:00</option> 
     <option value="20:30">20:30</option> 
     <option value="21:00">21:00</option> 
     <option value="21:30">21:30</option> 
     <option value="22:00">22:00</option> 
    </select>

Примечание: Вам придется обращаться еще два случая:

1). Когда пользователь выбирает время запуска как «22:00» или «21:00» и т. Д.

2). Что делать, если пользователь хочет, чтобы выбрать время начала как "8:00" (OnChange не получить срабатывает)

источник

2016-07-02 01:03:55 Ajit

привет спасибо вам помочь. извините, если я звучу глупо, поскольку я абсолютный новичок пытается научиться JS .. im запутался, когда вы говорите, присоедините сгенерированный массив от myfunc до списка времени. заключается в том, что с помощью события? как вы делали в начале списка (onchange) –

Смотрите этот похожий вопрос, http://stackoverflow.com/questions/9895082/javascript-populate-drop-down-list-with-array – Ajit

как скрыть и показать выпадающее меню в соответствии с другим выпадающим списком

ответ

Смежные вопросы