如何根据另一个下拉列表隐藏和显示下拉列表值答案

【问题标题】：how to hide and show dropdown list value according to another dropdown list如何根据另一个下拉列表隐藏和显示下拉列表值
【发布时间】：2016-11-04 10:30:28
【问题描述】：

我正在尝试使用另一个来操作下拉列表的值。下面是完整的代码。这些值基本上只是以小时为单位的时间。

            <!-- 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 的下拉列表根据我在名为 starttime 的下拉列表中选择的内容更改其值。例如：如果我在开始时间中选择 10:00 小时的值，则结束时间列表应仅显示 10:30 之后的小时数，并隐藏 10:00 之前的小时数。所以我基本上希望开始时间总是在结束时间之前。

还应该有一个最多 2 小时的时间限制。例如：如果我在开始时间选择 10:00，我只能在结束时间列表中选择 12:00 及以下的值。

由于我是新手，我似乎无法弄清楚如何使用纯 JavaScript 来做到这一点。

【问题讨论】：

标签： javascript html dropdownlistfor

【解决方案1】：

我是董事会

<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)这个问题好像很懒。

~~困难模式~~

用 this 去掉顶部丑陋的数组：

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

【讨论】：

嗨，谢谢您的帮助，您的代码似乎运行良好。

【解决方案2】：

这是根据您的要求为您的结束时间下拉列表生成时隙数组的函数。

现在，您只需将生成的数组从 myFunc 附加到 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 不会被触发）

【讨论】：

您好，感谢您的帮助。对不起，如果我听起来很愚蠢，因为我是一个尝试学习 JS 的绝对新手。当你说将生成的数组从 myfunc 附加到 endtime 列表时，我感到困惑。那是通过使用事件吗？就像你在开始时间列表中所做的那样 (onchange)
看到这个类似的问题，stackoverflow.com/questions/9895082/…

【解决方案3】：

我不会对此做太多介绍，因为它更多的是如何编码，而不是我尝试了所有问题。

我会保留您的开始时间，但会根据开始时间选择动态添加结束时间。

检查开始时间
更改事件运行函数
在函数内获取开始时间值并创建一个最多 12 个循环
在此函数中动态地将选项添加到已创建的选择下拉列表中

看看here

【讨论】：