網頁按價格下拉菜單不工作

Question

當我點擊過濾器下拉菜單，並選擇即'價格高 - 低'我希望它顯示價格的順序產品，但是當我選擇任何選項時什麼也沒有發生，頁面保持不變。如果我手動鍵入鏈接，即main.php?sort=name那麼這個工作。

HTML：

<select name="menu" id="drop"> 
    <option>-- Select a filter --</option> 
    <option value="main.php?sort=name">Name A - Z</option> 
    <option value="main.php?sort=pasc">Price Low-High</option> 
    <option value="main.php?sort=pdesc">Price High-Low</option>  
</select> 

JS：

var sortmenu = document.getElementById('menu'); 
sortmenu.onchange = function() { 
    window.open(this.options[ this.selectedIndex ].value, "_self"); 
}; 

Answer 1

你的選擇菜單的id是drop不menu，但是你sortmenu變量定義爲document.getElementById('menu')，但沒有ID在你的代碼中調用menu 。

因此，要解決這個問題，改變了...

var sortmenu = document.getElementById('menu'); 

...這個...

var sortmenu = document.getElementById('drop'); 

或者你可以改變這一點...

<select name="menu" id="drop"> 

...進入此...

<select name="menu" id="menu"> 

基本上，您可以重命名select元素的id，或更改getElementById函數中的id名稱。