Skip to main content
johns45317965
Known Participant
October 6, 2016
Answered

"Select Box" or "Drop Down Box" only works in one spot at a time

  • October 6, 2016
  • 2 replies
  • 2569 views

This is a very odd and very weird for me. I find the multiple "Select Box" scripts rather easy to save space on websites and useful to anyone browsing your title box. However, With this particular site I've been working on I have found it difficult to understand why some Select Boxes don't work - especially the script created directly by Dreamweaver's "Select" option (i.e. Insert -> Form -> Select).

--> Here's a link to a video showing how the Select Boxes are and aren't working as well as the scripts being used and how they are made. <--

Basically they are put together rather simple. Here is an example of the homemade Dreamweaver Select Box after I added all options, with description in italics:

<select name="Pick an Anonymous" size="2" id="Pick an Anonymous" title="Anonymous Options">

  <option value="#">Pick an Anonymous</option>

  <option value="http://www.webdomainhere">name preference here</option>

  <option value="http://www.webdomain#2here/">name preference #2 here</option>

</select>

and this is what you should get:

I do get that^, but when I drop down options and click the preferred option, it does nothing 😕😕  However, on a previous script - it's the one on top and on the bottom (not a Dreamwever box script style) and it does work. I'm just trying to figure out why. Here it is if you want to see it:

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

      <select id="foo">

    <option value="" selected>Pick a Conspiracy!</option>

    <option value="http://www.webdomainhere">name preference here</a></option>

    <option value="http//www.webdomainhere2">name preference here #2</a></option>

   <option value="http://www.webdomainhere3">name preference here #3</a></option>

</select>

<script>

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

        if (this.selectedIndex!==0) {

            window.location.href = this.value;

        }       

    };

</script>

The above script is the one that works when is it located FIRST (see video). It's weird and very frustrating not being able to figure out why it won't work why it won't work wherever it's located because it should, right?

This topic has been closed for replies.
Correct answer Jon Fritz

You have some serious structural html errors that need to be taken care of. Run the validator at http://validator.w3.org/nu to get a listing.

The second drop down list has spaces in the Id, you can't do that.

You also have no javascript telling the browser to use the values of the dropdown menu selections as window locations (a duplicate of lines 55-61 with a corrected id for the second list, for example).

2 replies

johns45317965
Known Participant
October 6, 2016

Home of The False Prophet - Conspiracy! ->that's the example page.

Here's a VIDEO showing exactly what's wrong and how everything is not working....

And here is the basic script for the example page as well:

<div align="center"><table width="1024" border="5" cellspacing="2.5" cellpadding="2.5">
  <tbody>
    <tr>
      <td><div align="center">Home to Johnny Anonymous</td>
    </tr>
  </tbody>
</table>

<table width="1024" border="5" cellspacing="2.5" cellpadding="2.5">
  <tbody>
    <tr>
      <td><div align="center">Home</a> </td>
  
<td rowspan="2"><div align="center">
      <select id="foo">
    <option value="" selected>Pick a Conspiracy!</option>
    <option value="http://www.false-prophet.website/ConspiracyPage_About.html">About Conspiracy</a></option>
    <option value="http://www.false-prophet.website/ConspiracyPage_OsamabinLaden.html">Osama Bin Laden Still There?!?!</a></option>
<option value="http://www.false-prophet.website/ConspiracyPage_Chemtrails.html">Chemtrails</a></option>
</select>
<script>
    document.getElementById("foo").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }       
    };
</script>
     
      <td><div align="center">Illuminati</a> </td>
      <td><div align="center">Demons</a> </td>
      <td><div align="center">Rev's Thoughts</a> </td>
     
<td rowspan="3"><div align="center">
<select name="Pick an Anonymous" size="1" id="Pick an Anonymous" title="Anonymous Options">
  <option value="#">Pick an Anonymous</option>
  <option value="http://www.false-prophet.website/VariousAnonymousPage_Johnny.html">Johnny</option>
  <option value="http://www.false-prophet.website/VariousAnonymousPage_Kyle.html">Kyle</option>
</select>

<td><div align="center">About Spirits</a> </p>
      </blockquote></td>     
    </tr>
  </tbody>
</table>

<td rowspan="2"><div align="center">
      <select id="foo">
    <option value="" selected>Pick a Conspiracy!</option>
    <option value="http://www.false-prophet.website/ConspiracyPage_About.html">About Conspiracy</a></option>
    <option value="http://www.false-prophet.website/ConspiracyPage_OsamabinLaden.html">Osama Bin Laden Still There?!?!</a></option>
<option value="http://www.false-prophet.website/ConspiracyPage_Chemtrails.html">Chemtrails</a></option>
</select>
<script>
    document.getElementById("foo").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }       
    };
</script>

<span style="font-size: large">

<span style="font-size: medium">copyright&copy;Johnny Anonymous, 2015 - <a href="mailto:">johnnyanonymous@false-prophet.website</a></span></span>
</body>
</html>

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
October 11, 2016

You have some serious structural html errors that need to be taken care of. Run the validator at http://validator.w3.org/nu to get a listing.

The second drop down list has spaces in the Id, you can't do that.

You also have no javascript telling the browser to use the values of the dropdown menu selections as window locations (a duplicate of lines 55-61 with a corrected id for the second list, for example).

johns45317965
Known Participant
October 17, 2016

The link you suggested is awesome and will be used plenty in the future for me - and hopefully all beginners.

I made the adjustments you suggested (id is now just "pick" and I added same previous java scripts; but changed it's id) and the result:

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

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

  <option value="#">Pick an Anonymous</option>

  <option value="website1">Johnny</option>

  <option value="website2">Payne</option>

  <option value="website3">Kyle</option>

</select>

<script>

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

        if (this.selectedIndex!==0) {

            window.location.href = this.value;

        }       

    };

</script>

...and happily I can say it works perfectly FINE :-)

Thanks very, very much for the help and future source through Ready to check - Nu Html Checker

Jon Fritz
Community Expert
Community Expert
October 6, 2016

The best way to get help with a code problem is to post a link to your work in progress. Even if it's just uploaded to a test location on your server so we can see all the code and how it functions/malfunctions in our browsers.

If you can't upload to your server and post a link, a very distant second would be pasting all of the code from the page and any dependent file to the forum (don't use email, it won't come through).

johns45317965
Known Participant
October 6, 2016

Sure I can make a testing page, but you would need my password and the such to login and what-not, correct?

Jon Fritz
Community Expert
Community Expert
October 6, 2016

Place it in a publicly available location and link to it, no need for passwords.

I suggest placing a folder called TEST in your root directory, then putting the page in there. Once the problem is figured out, just delete TEST and its contents from the server.