[英]Remove selected Options in the next select field using Javascript
I have about 10 select boxes added to a form using a loop.我使用循环将大约 10 个 select 框添加到表单中。 All with the same number of options.
所有选项都具有相同数量的选项。
<?php
for($i=1; $i<11; $i++){
?>
<select name="doc[]"; id="doc<?php echo $i?>"; autocomplete="off";
onchange='disable()' required>
<option value="none" disabled selected>Select</option>
<option value=0>A</option>
<option value=1>B</option>
<option value=2>C</option>
<option value=3>D</option>
<option value=4>E</option>
<option value=5>F</option>
<option value=6>G</option>
<option value=7>H</option>
<option value=8>I</option>
</select>
<?php
}
?>
I want if I select first option in first select box, the next select box should not have that option.我想如果我 select 第一个选项在第一个 select 框中,下一个 select 框不应该有该选项。 In pure Javascript, not Jquery.
在纯 Javascript 中,而不是 Jquery。
I have tried writing something like:我试过写类似的东西:
function disable(){
for(var i=1; i<9; i++){
var val = document.getElementById('doc'+i).value;
document.getElementById("doc"+(i+1)).options[val].disabled =
true;
}
}
But it is not working as I expected.但它没有像我预期的那样工作。
Ok, this has to be done in some steps.好的,这必须在某些步骤中完成。
Getting the value of the selected option:获取所选选项的值:
var select = document.getElementById("doc1"); var value = select.value;
Fire a change event when you select an option:当您选择 select 时触发更改事件:
let doc = document.querySelector('#doc1');让 doc = document.querySelector('#doc1');
doc.addEventListener('change', function() { doc.addEventListener('change', function() {
document.getElementById("doc2").options[value ] = null; document.getElementById("doc2").options[value] = null; })
})
You use this to your own liking, using array map or loop to set up the serial of select boxes in any way you want.您可以根据自己的喜好使用它,使用数组 map 或循环以任何您想要的方式设置 select 盒子的序列。 A word of advice, you probably should try around with javascript a bit more before attempting more advanced codes since I see no indication that you tried a solution at all.
提一句建议,在尝试更高级的代码之前,您可能应该多尝试一下 javascript,因为我看不到任何迹象表明您根本没有尝试过解决方案。 It is ok to be a novice, we all were there one time.
作为新手没关系,我们都去过一次。 But I really suggest you take a look at this and try it your own way.
但我真的建议你看看这个并以自己的方式尝试。 It is not exactly a duplicate since it deals with only two dropdowns, but it is a start and will give you a basic idea of what you are doing.
它并不完全是重复的,因为它只处理两个下拉菜单,但它是一个开始,会让你对你在做什么有一个基本的了解。 ( How do I remove options from a dropdownlist in javascript? )
( 如何从 javascript 的下拉列表中删除选项? )
After so many hours of trying as a novice, I have managed to fix this by modifying and re-modifying the JS code and finally ending with the following: There were 10 select menus, so I have changed the loop variable total to <11
作为新手尝试了这么多小时后,我设法通过修改和重新修改 JS 代码来解决这个问题,最后以以下内容结束:有 10 个 select 菜单,所以我将循环变量总数更改为
<11
function disable(){
for(var i=1; i<11; i++){
var doc = document.getElementById('doc'+i);
var changesource=event.target.id || event.srcElement.id;
if(changesource==doc.id){
var val = doc.selectedIndex;
for(var m=i+1; m<11; m++){
document.getElementById('doc'+m).options[val].remove();
}
}
else{
continue;
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.