Web Analytics Made Easy -
StatCounter Dynamic Item selection in Upper and lower Dropdown menus. - CodingForum

Announcement

Collapse
No announcement yet.

Dynamic Item selection in Upper and lower Dropdown menus.

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Dynamic Item selection in Upper and lower Dropdown menus.

    Hello All:

    On selecting Item "bbb" in the first/second drop down menu, I would like to have the same information updatec/selected in the second/first drop down menu (as "bbb" also). Could you please help with getting a function in doing this?

    This is my current code:

    <html>
    <head><title>Select Options</title>
    <script language="javascript">
    <!--

    function change-items(this) {
    document.this.items.options[this.options[selectedIndex].value;
    }
    //-->
    </script>
    </head>
    <body>
    <form name="this">
    <table >
    <tr>
    <td>
    <select onchange="change-items(this);" name="items">
    <option value="" >----</option>
    <option value="aaa">bbb</option>
    <option value="bbb">bbb</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <select onchange="change-items(this);" name="items">
    <option value="" >----</option>
    <option value="aaa">aaa</option>
    <option value="bbb">bbb</option>
    </select>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </head>
    </html>

  • #2
    Is this what you meant?
    Code:
    <html>
    <head><title>Select Options</title>
    <script language="javascript">
    <!--
    
    function changeItems(oSelect) {
    var F = document.oForm;
    switch (oSelect.name)
    {
    case "sOne" : 
    F.sTwo.options[F.sOne.options.selectedIndex].selected = "selected";
    break;
    
    case "sTwo" : 
    F.sOne.options[F.sTwo.options.selectedIndex].selected = "selected";
    break;
    }}
    //-->
    </script>
    </head>
    <body>
    <form name="oForm">
    <table >
    <tr>
    <td>
    <select name="sOne" onchange="changeItems(this);">
    <option>----</option>
    <option>aaa</option>
    <option>bbb</option>
    </select>
    </td>
    </tr>
    <tr>
    <td>
    <select name="sTwo" onchange="changeItems(this);">
    <option>----</option>
    <option>aaa</option>
    <option>bbb</option>
    </select>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </head>
    </html>
    I'm sure there's more than one way to do that, but I've been addicted to the switch statement lately

    Also, be careful with the names you choose...
    The first character must be an ASCII letter (either uppercase or lowercase), or an underscore _ character. Note that a number cannot be used as the first character. Subsequent characters must be letters, numbers, or underscores.

    Internet Development SDK
    Also, "this" is a reserved word, so don't use it when naming stuff either.
    hmm... ?

    Comment


    • #3
      Ref: Dynamic Item selection in Upper and lower Dropdown menus.

      Hello Swmr:

      Thanks very much for the reply. I will now study it and try it out; will contact you later about the result. I`m a newbie in javascript.

      Thank you, pyc

      Comment


      • #4
        Hello Swmr:

        I have just tested the code. It works exactly well.
        Thanks very much.

        PS:
        Another thing; Could you please suggest a book with lots of javascript coding examples?

        pyc

        Comment


        • #5
          Originally posted by pyc
          ... a book with lots of javascript coding examples?
          Here's a link that may be useful: javascript book references

          I don't actually have anything on paper, but have found a sea of information online, and have downloaded much of it for use as a local reference -- which seems to make accessing & testing examples an easy task.

          This forum is a great place to learn, as well; either by asking questions, using the search feature, or challenging yourself to help others.
          hmm... ?

          Comment

          Working...
          X