user5923623 user5923623 - 7 months ago 10
HTML Question

Webpage sort by price dropdown menu not working

When I click on the filter dropdown menu and select i.e. 'Price High - Low' I want it to display products in order of price, however when I select any option nothing happens, the page remains the same. If I type in the link manually i.e.

main.php?sort=name
then that works.

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

Your select menu's id is drop not menu, however your sortmenu variable is defined as document.getElementById( 'menu' ), but there is no id called menu in your code.

So to resolve this, change this...

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

...into this...

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

Alternatively you could change this...

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

...into this...

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

Basically either you rename the id of the select element, or change the id name in the getElementById function.