javascript-根据彼此显示两个下拉菜单项

我有两个下拉列表,它们的值完全相同.
我希望下拉菜单2根据下拉菜单1的项目显示值.
因此,所选下拉列表2的索引将等于或大于所选下拉列表1的索引.

 document.getElementById("SELECTB").selectedIndex >= document.getElementById("SELECTA").selectedIndex

因此,如果在下拉列表1中选择了B,则下拉列表2中的可选选项将为B,C和D.(A将为不可选项)

http://jsfiddle.net/xxyhm78t/1/

解决方法:

使用纯Javascript的解决方案：

var select1 = document.getElementById("SELECTA");
var select2 = document.getElementById("SELECTB");
select1.onchange = function () {

 while (select2.firstChild) {
    select2.removeChild(select2.firstChild);
 }

 for (var i = select1.selectedIndex; i < select1.options.length; i++) {
    var o = document.createElement("option");
    o.value = select1.options[i].value;
    o.text = select1.options[i].text;
    select2.appendChild(o);
 }
}  

Fiddle

参考：这是javascript Change the Dropdown values based on other dropdown的调整后解决方案

更新：如评论中的询问-禁用选项而不是删除它们：

var select1 = document.getElementById("SELECTA");
var select2 = document.getElementById("SELECTB");
 select1.onchange = function () {

 while (select2.firstChild) {
    select2.removeChild(select2.firstChild);
  }

  for (var i = 0; i < select1.options.length; i++) {
    var o = document.createElement("option");
    o.value = select1.options[i].value;
    o.text = select1.options[i].text;
    (i <= select1.selectedIndex) 
  ? o.disabled = true 
  : o.disabled = false ;        
    select2.appendChild(o);
  }
}

调整Fiddle

更新2：如评论中的询问,是否可以将其调整为使用类名而不是ID-是的,通过使用getElementsByClassName().我已经在此Fiddle中进行了调整,以选择使用class =“ SELECTA”和class =“ SELECTB”代替以前使用的ID.对Javascript的相应调整仅是变量的声明：

var select1 = document.getElementsByClassName("SELECTA")[0];
var select2 = document.getElementsByClassName("SELECTB")[0];

如您所知,id是唯一属性,因此可以使用getElementById()获得单个元素.即使只有一个元素具有该类,getElementsByClassName()也会返回HTML元素的集合.因此,在此示例中,有必要解决此集合的第一个元素.随着计数从0开始,具有类“ SELECTA”的第一个(也是唯一)元素是getElementsByClassName(“ SELECTA”)[0].

参考号：https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName#Syntax

标签：drop-down-menu,html,javascript,jquery
来源： https://codeday.me/bug/20191121/2049786.html