按价格下拉菜单排序的网页无效

Question

当我点击过滤器下拉菜单并选择＆＃39; Price High - Low＆＃39;我希望它以价格的顺序显示产品，但是当我选择任何选项时没有任何反应，页面保持不变。如果我手动输入链接，即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">

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