JavaScript - 在选择选项时隐藏下拉菜单中的选项

Question

我在网站上有一个表单，通过WordPress使用BeTheme和联系表单7制作。一个下拉列表有两个选项：“Vormittag'Session”和“Abend Session “，另一个有5个选项：”Premium“，”PK1“，”PK2“，”PK3“，”Famille“。我喜欢它，所以如果选择“异常会话”，“PK1”，“PK2”和“PK3”消失。

下面是两种形式的HTML：

<span class="wpcf7-form-control-wrap menu-772"> 
<select name="menu-772" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"> 
     <option value="Vormittag Session">Vormittag Session</option> 
     <option value="Abend Session">Abend Session</option> 
</select> 

<span class="wpcf7-form-control-wrap menu-634"> 
    <select name="menu-634" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"> 
     <option value="Premium">Premium</option><option value="PK1">PK1</option> 
     <option value="PK2">PK2</option> 
     <option value="PK3">PK3</option> 
     <option value="Familie">Familie</option> 
    </select> 
</span> 

这里是JS代码我想：

function hideValues(){ 
    var x = document.getElementsByName("menu-772"); 
    var y = document.getElementsByName("menu-634"); 
     if(x.value="Abend Session") 
     { 
      y.remove(2); 
      y.remove(3); 
      y.remove(4);  
     } 
} 

在上面的JS代码中，想法是调用两个列表x和y，如果x中的值是“Abend Session”，则在y中删除位置2,3和4。我在正确的轨道上，还是我的方式？

Answer 1

尝试x[0].value=="Abend Session"。并在选择更改时致电hideValues()

document.getElementsByName返回HTML文档中给定名称的节点列表集合。因此，要选择第一个项目，请使用x[0]。

或者您可以使用element = document.querySelector(selectors);这将返回文档中与指定的选择器或选择器组相匹配的第一个元素。

此外，索引将会改变，如果你删除一个option.so删除PK1,PK2,PK3。你可以简单地使用y[0].remove(1);三次或删除与去年指数第一

function hideValues(){ 
 
    var x = document.getElementsByName("menu-772"); 
 
    var y = document.getElementsByName("menu-634"); 
 
    
 
    if(x[0].value=="Abend Session"){ 
 
    
 
      y[0].remove(3); 
 
      y[0].remove(2); 
 
      y[0].remove(1); 
 
      
 
     
 
    } 
 
     
 
    
 
}

<span class="wpcf7-form-control-wrap menu-772"> 
 
<select name="menu-772" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="hideValues()"> 
 
     <option value="Vormittag Session">Vormittag Session</option> 
 
     <option value="Abend Session">Abend Session</option> 
 
</select> 
 
<span class="wpcf7-form-control-wrap menu-634"> 
 
    <select name="menu-634" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false"> 
 
     <option value="Premium">Premium</option><option value="PK1">PK1</option> 
 
     <option value="PK2">PK2</option> 
 
     <option value="PK3">PK3</option> 
 
     <option value="Familie">Familie</option> 
 
    </select> 
 
</span>

Answer 2

这里的选项，试试这个。现在选择你的PK值在哪里并不重要。

 function hideValues() 
     { 
      var Abend = ["PK1", "PK2", "PK3"]; 
      var x = document.getElementsByName("menu-772"); 
      var src = document.getElementsByName("menu-634")[0] 

      if (x[0].value == "Abend Session") 
      { 
       for (var count = src.options.length - 1; count >= 0; count--) 
       { 
        if (Abend.indexOf(src.options[count].value) != -1) 
        { 
         src.remove(count, null); 
        } 
       } 
      } 
     }