View Full Version : How to connect two Dropdowns?

08-29-2011, 08:26 PM

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

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:


<table width="500" border="0">
<td colspan="2" style="background-color:#FFA500;">

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>GOA</b><br />
<td style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
<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 name="menu" style="width:200px;"="font-family:'Arial';color:#FFFFFF;background-color:#000000;font-size:10pt;">
<option value="403802"</option>
<option value="403602"</option>
<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;">
<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","November","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);
<div id="clockbox"></div>


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

Old Pedant
08-29-2011, 09:35 PM
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.

<select name="menu1" onchange="this.form.menu2.selectedIndex=this.selectedIndex;">
<option value="VASCO">VASCO</option>
<option value="FATORDA">FATORDA</option>
<select name="menu2" onchange="this.form.menu1.selectedIndex=this.selectedIndex;">
<option value="403802">403802</option>
<option value="403602">403602</option>

08-30-2011, 12:58 AM
Here is a simple way:

Javascript code:

document.getElementById('select1').onchange = function(e) {
var index = this.selectedIndex;
document.getElementById('select2').options[index].selected = true;

Html code:

<select id="select1">
<option value="foo">foo</option>
<option value="bar">bar</option>
<select id="select2">
<option value="foo">foo</option>
<option value="bar">bar</option>

Old Pedant
08-30-2011, 02:32 AM
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.

document.getElementById('select1').onchange =
function() { document.getElementById('select2').selectedIndex = this.selectedIndex; };
document.getElementById('select2').onchange =
function() { document.getElementById('select1').selectedIndex = this.selectedIndex; };

Philip M
08-30-2011, 08:43 AM
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?

<select name="menu" onchange = " doSomething()">
<option value = "">Select a beach .......</option>
<option value= "VASCO~403802">VASCO</option>
<option value= "FATORDA~403602">FATORDA</option>

And then split the value at the ~delimiter into the two components?