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