Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question How to connect two Dropdowns?

    Hello,

    I am very new to HTML. Yesterday I have started learning HTML.

    I want to make two Dropdown but should be linked with each other. There value should change after click "go" button.

    In other word I want to make one html for Post Code/Pin Codes of my state.

    Please Help Me!!!

    I have made script till here:

    <html>
    <body>

    <table width="500" border="0">
    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>PIN CODES OF GOA</h1>
    </td>
    </tr>

    <tr valign="top">
    <td style="background-color:#FFD700;width:100px;text-align:top;">
    <b>GOA</b><br />
    BEACHES<br />
    CHURCHES<br />
    BARS
    </td>
    <td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
    </body>
    </html>
    </body>
    <form>
    <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;">
    <option value=VASCO</option>
    <option value=FATORDA</option>
    </select>
    <select name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;">
    <option value="403802"</option>
    <option value="403602"</option>
    </select>
    <input type="button" onClick="location=this.form.menu.options[this.form.menu.selectedIndex].value;" value="GO" style="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;">
    </form>
    <script type="text/javascript">
    tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
    tmonth=new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December");

    function GetClock(){
    d = new Date();
    nday = d.getDay();
    nmonth = d.getMonth();
    ndate = d.getDate();
    nyear = d.getYear();
    nhour = d.getHours();
    nmin = d.getMinutes();
    nsec = d.getSeconds();

    if(nyear<1000) nyear=nyear+1900;

    if(nhour == 0) {ap = " AM";nhour = 12;}
    else if(nhour <= 11) {ap = " AM";}
    else if(nhour == 12) {ap = " PM";}
    else if(nhour >= 13) {ap = " PM";nhour -= 12;}

    if(nmin <= 9) {nmin = "0" +nmin;}
    if(nsec <= 9) {nsec = "0" +nsec;}


    document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+ap+"";
    setTimeout("GetClock()", 1000);
    }
    window.onload=GetClock;
    </script>
    <div id="clockbox"></div>

    </td>
    </tr>

    <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    Search Your Post Code</td>
    </tr>
    </table>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Explain more??? You mean that when you click the second <option> in the first <select> then it should automatically choose the second <option> in the second <select>?? And the other way around.

    Easy. BUT...

    But you should *NOT* give your two <select>s the same name.

    Also, your HTML for the <option>s is *illegal*. Look at how I have corrected it, below.
    Code:
    <form>
    <select name="menu1" onchange="this.form.menu2.selectedIndex=this.selectedIndex;">
    <option value="VASCO">VASCO</option>
    <option value="FATORDA">FATORDA</option>
    </select>
    <select name="menu2" onchange="this.form.menu1.selectedIndex=this.selectedIndex;">
    <option value="403802">403802</option>
    <option value="403602">403602</option>
    </select>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    punitsahay (08-30-2011)

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    50
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Link two dropdown lists

    Here is a simple way:

    Javascript code:

    Code:
    <script>
    document.getElementById('select1').onchange = function(e) {
      var index = this.selectedIndex;
      document.getElementById('select2').options[index].selected = true;
    }
    </script>

    Html code:

    Code:
    <select id="select1">
      <option value="foo">foo</option>
      <option value="bar">bar</option>
    </select>
    <select id="select2">
      <option value="foo">foo</option>
      <option value="bar">bar</option>
    </select>
    Don't forget to mark solution providing post as "Answered".
    It helps others to find correct solutions!

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,193
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Doesn't go the other way...number 2 affecting number 1.

    And selectedIndex really is easier (and a tiny bit more efficient, not that it matters) than marking the <option> selected.

    Code:
    <script>
    document.getElementById('select1').onchange = 
        function() { document.getElementById('select2').selectedIndex = this.selectedIndex; };
    document.getElementById('select2').onchange = 
        function() { document.getElementById('select1').selectedIndex = this.selectedIndex; };
    </script>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,919
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I don't see the point of having two select lists. Why not have just one with the values including the two pieces of information?

    Code:
    <select name="menu" onchange = " doSomething()">
    <option value = "">Select a beach .......</option>
    <option value= "VASCO~403802">VASCO</option>
    <option value= "FATORDA~403602">FATORDA</option>
    </select>
    And then split the value at the ~delimiter into the two components?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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