Web Analytics Made Easy - StatCounter How to connect two Dropdowns? - CodingForum

Announcement

Collapse
No announcement yet.

How to connect two Dropdowns?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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>
    Own a Professional Website with stylish look at just 895$ Only! Visit: http://www.sanctify.in/
    Tags: None
  • #2
    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="[B][COLOR="Red"]menu1[/COLOR][/B]" [B][COLOR="Red"]onchange="this.form.menu2.selectedIndex=this.selectedIndex;"[/COLOR][/B]>
<option value="VASCO">VASCO</option>
<option value="FATORDA">FATORDA</option>
</select>
<select name="[B][COLOR="Red"]menu2[/COLOR][/B]" [B][COLOR="Red"]onchange="this.form.menu1.selectedIndex=this.selectedIndex;"[/COLOR][/B]>
<option value="403802">403802</option>
<option value="403602">403602</option>
</select>
    Be yourself. No one else is as qualified.

    Comment

    • #3
      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!

      Comment

      • #4
        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>
        Be yourself. No one else is as qualified.

        Comment

        • #5
          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.

          Comment

          Previous template Next
          Working...
          X
          😀
          🥰
          🤢
          😎
          😡
          👍
          👎