Results 1 to 8 of 8

Thread: Javascript interaction with a drop down menu

  1. #1
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Javascript interaction with a drop down menu

    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...

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Try replacing the following line:
    Code:
    document.myForm.pictureSelection.options[4].selected=true;
    - Mike

  3. #3
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default More Problems

    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.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow

    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?

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Possibly. Can you link to the page in question?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •