网页按价格排序下拉菜单不起作用

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' )，但在你的代码中没有menu的 id。

因此，要解决此问题，请更改此...

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

。成这个...

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

或者，您可以更改此设置...

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

。成这个...

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

基本上，要么重命名选择元素的 id，要么更改 getElementById 函数中的 id 名称。