Dynamic Drop-Down with Links
Question
I am creating a home page for my website and need to utilize a dynamic textbox in order to simplify navigation.
There will be two html dropdown menus. As soon as the user selects a category from the first dropdown menu, all of the associated links from the selection will load into the second dropdown menu. When the user makes a selection from the second textbox, the webpage will take the user to the selected page. The key with the second dropdown menu is to make all of the items links so when the user makes the selection, they are essentially clicking on a link to the associated web page.
I have uploaded an html document which should give you an idea of what I'm looking for.
<!DOCTYPE html>
<head>
</head>
<body>
<center>
<h1>SELECTOR ONE</h1>
</center>
<center>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
</select>
</center>
<br>
<center>
<h1>SELECTOR TWO</h1>
</center>
<center>
<select>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
<option>Option 1 ITEM LINK</option>
</select>
</center>
<center>
<select>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
<option>Option 2 ITEM LINK</option>
</select>
</center>
<center>
<select>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
<option>Option 3 ITEM LINK</option>
</select>
</center>
<br>
</body>
</html>
1 answers
solution1
3 2013-07-29 20:30:18
Simple, add a value attribute to your options , such as:
<option value="http://www.google.com">Option 3 ITEM LINK</option>
Create a change event:
$("select").change(function() {
window.location.href = this.value;
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.