Skip to main content
johns45317965
johns45317965
Known Participant
May 1, 2017
Answered

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

  • May 1, 2017
  • 4 replies
  • 2196 views

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>

This topic has been closed for replies.
Correct answer sinious

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.

4 replies

sinious
sinious
Legend
September 20, 2017

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!

    johns45317965
    johns45317965Author
    Known Participant
    September 19, 2017

    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

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    August 30, 2017

    Not closing the DIV's either.

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    sinious
    siniousCorrect answer
    Legend
    August 30, 2017

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices