Javascript interaction with a drop down menu

**amariotti** · 05-31-2007, 10:54 PM

I'm trying to get this link in my HTML file to change the value in the drop down menu to option 4. Something is not working properly. Here's the code:

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<SCRIPT type="text/javascript" language="JavaScript"> 
function changeDropDownSelection() 
{ 
document.myForm.pictureSelection.options[4]=true;
} 
</SCRIPT>

</head>

<body>

<form name="myForm">
    <select name="pictureSelection" id="pictureSelection">
      <option value="1">Boy Playing</option>
      <option value="2">Girl Running</option>
      <option value="3">Master Chief Dancing</option>
      <option value="4">Warthog Upside Down</option>
      <option value="5">Battle Rifle Headshot</option>
      <option value="6">Rambonian Owning</option>
    </select>
</form>

<A HREF="javascript:changeDropDownSelection()">Click this link to change to the Battle Rifle Headshot</A>

</body>
</html>

Help... please...

**mburt** · 06-01-2007, 12:03 AM

Try replacing the following line:

Code:

document.myForm.pictureSelection.options[4].selected=true;

**amariotti** · 06-01-2007, 09:20 PM

Well, with some research and help from my brother-in-law this is what I have come up with so far:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type ="text/javascript"> 
<!--
function changeDropDownSelection(formName,selectionName,i) 
{
	selectedForm=document.getElementById(formName);
	selectedMenu=document.getElementById(selectionName);
    document.selectedForm.selectedMenu.options[i].selected = true;
    return   
} 
//-->
</script>

</head>
<body>
<form name="formatta">
    <select name="imageSelection">
      <option value="1">Boy Playing</option>
      <option value="2">Girl Running</option>
      <option value="3">Master Chief Dancing</option>
      <option value="4">Warthog Upside Down</option>
      <option value="5">Battle Rifle Headshot</option>
      <option value="6">Rambonian Owning</option>
    </select>
</form>

<a href="javascript:changeDropDownSelection('formatta','imageSelection',5)">Click this link to change to the Battle Rifle Headshot</a>

    <br />
    <br />

</body>
</html>

It looks great, but for some reason it's not functioning like it's supposed to. Any thoughts? I'm guessing that there's just something missing somewhere. Can't put my finger on it though.

**Twey** · 06-01-2007, 09:53 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Don't use XHTML, which isn't well-supported yet (I'm presuming it's actually pseudo-XHTML [being sent with a text/html MIME type], unless you've decided to drop support for IE), and don't use Transitional DOCTYPEs, which are outdated.

Code:

<!--

Unnecessary, and would cause the whole script to be ignored were you using true XHTML (with an XML- or XHTML-based MIME-type). You should almost certainly be sending HTML 4.01 Strict:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Code:

function changeDropDownSelection(formName,selectionName,i)

Are the first two parameters names, or IDs? The identifiers suggest that they're names, but you've later called document.getElementById() on them, which only takes IDs (according to the standard; Internet Explorer has a bug which causes it to return elements with that name as well, but this is against the standard).

Code:

        selectedForm=document.getElementById(formName);

It would be easier and better-supported to use the document.forms collection, but that's less than vital.

Code:

        selectedMenu=document.getElementById(selectionName);

Using IDs for form elements, however, is usually a bad idea, since you have to give them a name anyway in order for them to be submitted.

Code:

    document.selectedForm.selectedMenu.options[i].selected = true;

Use the document.forms and form.elements collections, don't expect them to be properties of their parent elements. This won't always be the case. Also, there are no elements called "selectedForm" or "selectedMenu" in the markup you've posted here.

Code:

    return

Return what? Using a blank return statement at the end of a function is pointless -- it will return anyway once control moves out of the function.

Code:

function changeSelect(frmName, elName, index) {
  document.forms[frmName].elements[elName].selectedIndex = index;
}

Code:

<a href="javascript:changeDropDownSelection('formatta','imageSelection',5)">Click this link to change to the Battle Rifle Headshot</a>

Firstly, this won't change to the Battle Rifle Headshot, it will change to the Rambonian Owning, since arrays and collections are zero-based in ECMAScript. Secondly, <a> elements with the href attribute are for hyperlinks: that is, links that direct the browser to another page when clicked. IE in particular does things based on this assumption, such as stopping animated images when the link is clicked. If you want to achieve a link-like look (there's a tongue-twister), using a <span> and styling it using CSS is the correct way to go:

Code:

<style type="text/css">
  span.pseudolink {
    /* Change to match your site's style for links. */
    text-decoration: underline;
    color: blue;
    cursor: pointer;
    /* We also only want these to show if the user
         has scripting support enabled. */
    display: none;
  }
</style>
<script type="text/javascript">
  onload = function() {
    for(var i = 0, e = document.getElementsByTagName("span"); i < e.length; ++i)
      if(e[i].className === "pseudolink")
        e[i].style.display = "";
  };
</script>

Code:

<span class="pseudolink" onclick="changeSelect('formatta', 'imageSelection', 4);">Click here to change to the Battle Rifle Headshot.</span>

You could also use a button.

Code:

    <br />
    <br />

Using a <br> element to force whitespace is an abuse of the element. Use the CSS margin or padding properties.

**amariotti** · 06-01-2007, 10:10 PM

Call me a moron, but I am still having a hard time understanding a lot of the things that you were saying. Laman terms please.

Thanks for the help though.

I guess what I'm looking for is more than just criticism on every last bit of the code that I posted. How bout a working sample? Maybe you did post it, I may just be stupid. Did I miss it?

**Twey** · 06-02-2007, 08:01 AM

I guess what I'm looking for is more than just criticism on every last bit of the code that I posted. How bout a working sample? Maybe you did post it, I may just be stupid. Did I miss it?

Yes

My post was in the general format:

Code:

code

Explanation

Code:

replacement

A full page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Untitled Page</title>
    <style type="text/css">
      span.pseudolink {
        /* Change to match your site's style for links. */
        text-decoration: underline;
        color: blue;
        cursor: pointer;
        /* We also only want these to show if the user
             has scripting support enabled. */
        display: none;
      }
    </style>
    <script type="text/javascript">
      onload = function() {
        for(var i = 0, e = document.getElementsByTagName("span"); i < e.length; ++i)
          if(e[i].className === "pseudolink")
            e[i].style.display = "";
      };
    </script>
  </head>
  <body>
    <form id="formatta" action="">
      <div>
        <select name="imageSelection">
          <option value="1">Boy Playing</option>
          <option value="2">Girl Running</option>
          <option value="3">Master Chief Dancing</option>
          <option value="4">Warthog Upside Down</option>
          <option value="5">Battle Rifle Headshot</option>
          <option value="6">Rambonian Owning</option>
        </div>
      </select>
    </form>
    <p>
      <span
        class="pseudolink"
        onclick="changeSelect('formatta', 'imageSelection', 4);"
      >
        Click here to change to the Battle Rifle Headshot.
      </span>
    </p>
  </body>
</html>

Call me a moron, but I am still having a hard time understanding a lot of the things that you were saying. Laman terms please.

Which things in particular?

**amariotti** · 06-04-2007, 02:41 PM

Thanks for your help.

I have taken and placed what you gave me into an HTML file and uploaded it to our webserver. Originally when I tried the page out it came up without the "psuedolink," so I had to take and change the "display" to inline to reveal that. Then I tried to see how the link interacted with the dropdown menu and nothing happened. Am I missing something?

**Twey** · 06-04-2007, 05:02 PM

Possibly. Can you link to the page in question?

Thread: Javascript interaction with a drop down menu

Thread Tools

Search Thread

Javascript interaction with a drop down menu

More Problems

Bookmarks

Bookmarks

Posting Permissions