如何根据另一个下拉列表隐藏和显示下拉列表值
how to hide and show dropdown list value according to another dropdown list
我试图使用另一个操作下拉列表的值。下面是完整的代码。这些值本质上就是以小时为单位的时间。
<!-- 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的下拉列表中选择的内容改变其值。例如:如果我在starttime中选择的值为10:00 hrs，那么endtime列表应该只显示10:30之后的时间，而隐藏10:00之前的时间。我希望starttime总是在endtime之前。
还应该有最长2小时的时间限制。例如:如果我在开始时间中选择10:00小时，我只能在结束时间列表中选择12:00及以下的值。
我似乎不能弄清楚如何做它与纯JavaScript，因为我是一个新手。
I was board
<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(':'));
我不会在这方面做太多，因为它更多的是如何编码，而不是我已经尝试了所有问题。
我将保持您的开始时间不变，但根据开始时间选择动态添加结束时间。
- 检查启动时间
- On change event run function
- 在函数中获得开始时间值并创建一个循环，最高为12
- 在此函数中动态添加选项到已经创建的选择下拉菜单
看这里
下面是根据您的需求生成结束时间下拉列表的时隙数组的函数。
现在，你所需要做的就是将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不会被触发)
相关文章：
- 如何在按钮中显示下拉列表中选定的元素
- 根据前两个下拉ID显示第三个下拉列表
- 根据用户从下拉列表中的选择显示多个文本框
- jQuery下拉列表未显示第一个选项
- AngularJS下拉列表未显示所选值
- 引导程序下拉列表显示不正确
- 使用2个下拉列表显示/隐藏分区
- 在html中显示任一下拉列表
- 选中复选框时如何显示/隐藏下拉列表
- 需要在 html 中使用两个下拉列表来显示不同的 json 值
- 显示基于第一个下拉列表的第二个下拉列表不起作用
- HTML 表单字段根据从下拉列表中选择的选项显示/隐藏
- 剑道网格编辑内联下拉列表不显示
- 选择下拉列表需要在选中时显示提供商的详细信息-无法通过我的脚本显示url
- 触发 html5 输入数据列表下拉列表显示
- 使用下拉列表显示/隐藏
- 通过选择一个下拉列表显示两个不同的值
- JavaScript链式下拉列表显示/隐藏一个Div
- 下拉列表显示[对象对象]，而不是使用击倒值
- 加载时，剑道下拉列表显示DataValueField在DataTextField之前
