Welcome to WebmasterWorld Guest from 54.146.30.44

Forum Moderators: open

Message Too Old, No Replies

JavaScript SelectBox

Basic HTML select box created in External JS file

     
2:46 pm on Jan 5, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2003
posts: 664
votes: 0


Hey everyone,

I need to create a basic HTML select box that will contain all my products. This select box will then be displayed on all my pages and allow visitors to quickly select a product in the select box and it will then forward them to the correct page.

Considering I have thousands of products, I was hoping to make this select box in an external JS file so search engines don't have to read through all the code.

Is it possible to call in an external JS file that creates this select box? This will mean it only takes up one line of code on the page and a search engine doesn't have to read through all the select box' code.

Thanks in advance for your help!

Wes

3:35 pm on Jan 5, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 0


Hello,

This should do what you need. It simply uses the innerHTML object and dynamically writes the <option>s into the <select>:

The External JS:

window.onload = loadProducts;

function loadProducts() {
mySelect = document.getElementById('myProducts');
mySelect.innerHTML = '<option value="http://google.com">Google</option>';
mySelect.innerHTML += '<option value="http://yahoo.com">Yahoo!</option>';
}

Head of HTML Page:

<script type="text/javascript" src="path/to/js.js"></script>

Body of HTML Page:

<select id="myProducts" onchange="window.location.href=this.value"></select>