Question

我在网站上有一个表格，通过WordPress制作，使用BeTheme和联系表格7.一个下拉列表有两个选项：“Vormittag'会话”和“Abend会话”，另一个有5个选项：“Premium”， “PK1”，“PK2”，“PK3”，“Famille”。如果选择“Abend Session”，我希望如此“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文档中具有给定名称的nodelist集合。因此，选择第一项使用x[0]。

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

如果删除一个选项，索引也会更改。删除PK1,PK2,PK3。您可以简单地使用y[0].remove(1);三次或删除最后一个索引的选项

＆＃13;

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);
            
        
    }
      
 
}

＆＃13;

<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>

＆＃13;

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);
                    }
                }
            }
        }

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

2 个答案: