Simple Navigation Bar Drop-Boxes; but only one works. Why? Very odd...watch video.

[johns45317965]

As the title states, I've been playing with adding simple, more options to sites through these drop boxes along my Navigation Bars for each domain as they may need to apply. However, when using the same style drop-box, only one per page seems to work...and the others go "bad" (or shall I say - they just don't "work") for a reason I cannot figure. Feel free to watch the video and check out the simple script (below) and share your thoughts.

Drop-box script along (very simple example, used in video):

<td rowspan="3"><div align="center">

<select name="Pick an Website" size="1" id="pick" title="Website Options">

  <option value="#">Pick website</option>

  <option value="http://www.google.com">google</option>

  <option value="http://www.yahoo.com">yahoo</option>

</select>

<script>

    document.getElementById("pick").onchange = function() {

        if (this.selectedIndex!==0) {

            window.location.href = this.value;

        }       

    };

</script>

[sinious · Accepted solution]

A couple very simple things.

1) All id's specified must be unique. In your example you have used the id="pick" several times. That is why it finds the first id in the script and applies the onchange script and stops looking any further. Simply give each drop-down a unique id ("pick1", "pick2", etc) and change the script accordingly as well. Alternately, as a better practice you should consider using a library like jQuery or a newer JavaScript DOM selection function like document.querySelectorAll to apply the script to all drop-downs with a class. e.g.:

<select class="nav-dd">
  <option>Select URL</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.yahoo.com">Yahoo</option>
</select>
<select class="nav-dd">
  <option>Select URL</option>
  <option value="http://www.adobe.com">Adobe</option>
  <option value="http://www.arstechnica.com">ArsTechnica</option>
</select>
<script>
// select all drop-downs with the class "nav-dd"
var navs = document.querySelectorAll('.nav-dd');
// assign handler to the change event for selected drop-downs
for ( var i = 0; i < navs.length; i++ ) {
  navs.addEventListener( 'change', navHandler );
}
// function to handle a change
function navHandler( e ) {
  // change location to selected value
  window.location.href = e.target[e.target.selectedIndex].value;
}
</script>

Any select elements you apply the class "nav-dd" to will then have the change handler applied. I should also be checking if the value exists so changing back to "Select URL" won't cause trouble but I think you can see how this works.

2) You're not closing your table cell tags (<td> with no closing </td>). That's not valid HTML and will cause you trouble.

[BenPleysier]

Not closing the DIV's either.

[johns45317965]

I went over it. Yeah, there's a ton of mistakes. I just got done putting a new PC together and installing the newest version of DW and love how it helps instantly identifying mistakes. I still have a long way to go. sinuous thanks for that quick and easy drop-down example. I'm going to have to use it until I completely resort all my sites to Bootstrap-style which I'm learning more and more every day

[sinious]

You're welcome and there's a lot more to learn about, like keeping scripting in separate easy to find files, etc, but one step at a time . Congratulations on your new system!