Forum Moderators: open
I'm sorry if this has already been discussed here, but I have trouble searching for it, as I don't know what keywords to use, so I'll try to explain here:
Let's say I have a simple <select> drop-down menu in pure html. I want to have another drop-down menu appear next to the first one when a user makes a selection in that first menu. I managed to find a way to "populate" the second menu with options based on first menu selection, but that way the second menu is always visible. I want it to appear out of nowhere if a certain selection is made in the first menu. I'm 99% sure I've seen this on some web sites, but I couldn't find any now. I would mention the following application as an example - user selects USA from drop down menu and another menu with states pops-up.
The second thing I want to accomplish is to activate two drop-down menus when a certain selection is made on a radio button, thus giving a user chance to select time range (i.e. from 10am to 6pm).
All help is greatly appreciated. If you can provide me with links to tutorials on similar topics - that would be awesome. Thanks everyone who responds.
Below Code can help you.
<html>
<body>
<form>
<select name="select1" onchange="showselect2Menu()">
<option value="USA">USA
<option value="INDIA">INDIA
<option value="UK">UK
</select>
<select name="select2" style="display:none">
<option value="VIJAYAWADA">VIJAYAWADA
<option value="GOVERNORPET">GOVERNORPET
</select>
</body>
</html>
<script>
function showselect2Menu() {
var selValue=document.forms[0].select1.options[document.forms[0].select1.selectedIndex].value;
if(selValue=="UK")
document.getElementById("select2").style.display="block";
else
document.getElementById("select2").style.display="none";
}
</script>
Thanks
Prasanth JVRS
<html>
<head>
<title>Dynamic Dropdown Example</title><script language="javascript">
<!--
function CreateProvince() {
var Primary = document.newforms.country.selectedIndex;
if ((Primary == null) ¦¦ (Primary == 0)) return;
if (Primary == 1) {
var ProvState = new Array;
ProvState[0] = new Option("Alberta");
ProvState[1] = new Option("British Columbia");
ProvState[2] = new Option("Manitoba");
ProvState[3] = new Option("New Brunswick");
}
if (Primary == 2) {
var ProvState = new Array;
ProvState[0] = new Option("Alabama");
ProvState[1] = new Option("Alaska");
ProvState[2] = new Option("Arizona");
ProvState[3] = new Option("Arkansas");
ProvState[4] = new Option("California");
ProvState[5] = new Option("Colorado");
ProvState[6] = new Option("Connecticut");
}
for (i=document.newforms.SelectProvState.options.length; i>0; i--) {
document.newforms.SelectProvState.options[i] = null;
}
for(i=0; i<ProvState.length; i++) {
document.newforms.SelectProvState.options[i] = ProvState[i];
}
document.newforms.SelectProvState.options[0].selected = true;
}
//-->
</script>
</head>
<body>
<form name="newforms">
Choose Country:
<select name="country" onChange="CreateProvince()">
<option value="">Choose Country</a>
<option value="Canada">Canada</a>
<option value="USA">USA</a>
</select>
<select name="SelectProvState">
<option value="1">Choose province/state</option>
</select>
</form>
</body>
</html>
Hopefully, that should give you an idea, although I'm sure others can come up with better examples - and hopefully somebody else will be able to provide you with some example code for your second requirement (selection made on a radio button) ...
I tried raymurphy's code too, but it didn't work as expected. Thanks both of you guys though!
Now if someone can explain me how to do the radio button thingie.. that would be awesome.
Thanks again for the help.
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function ActivateSelect() {
document.getElementById("time_from").disabled=false;
document.getElementById("time_to").disabled=false;
}
function DeactivateSelect() {
document.getElementById("time_from").disabled=true;
document.getElementById("time_to").disabled=true;
}
</script>
<tr>
<td>Choose one.</td>
<td><input id="a1" type="radio" name="when" value="1" onFocus="DeactivateSelect()" /><label for="a1"> option 1</label>
<input id="a2" type="radio" name="when" value="2" onFocus="DeactivateSelect()" /><label for="a2"> option 2</label>
<input id="a3" type="radio" name="when" value="3" onFocus="DeactivateSelect()" /><label for="a3"> option 3</label>
<input id="a4" type="radio" name="when" value="4" onFocus="ActivateSelect()" /><label for="a4"> OPTION 4</label></td>
</tr>
</body>
<td><select name=time_from disabled>
<option value=000>from</option>
<option value=00>00</option>
<option value=01>01</option>
<option value=02>02</option>
<option value=03>03</option>
<option value=04>04</option>
<option value=05>05</option>
<option value=06>06</option>
<option value=07>07</option>
<option value=08>08</option>
<option value=09>09</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
<option value=13>13</option>
<option value=14>14</option>
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
</select>
<select name=time_to disabled>
<option value=000>to</option>
<option value=00>00</option>
<option value=01>01</option>
<option value=02>02</option>
<option value=03>03</option>
<option value=04>04</option>
<option value=05>05</option>
<option value=06>06</option>
<option value=07>07</option>
<option value=08>08</option>
<option value=09>09</option>
<option value=10>10</option>
<option value=11>11</option>
<option value=12>12</option>
<option value=13>13</option>
<option value=14>14</option>
<option value=15>15</option>
<option value=16>16</option>
<option value=17>17</option>
<option value=18>18</option>
<option value=19>19</option>
<option value=20>20</option>
<option value=21>21</option>
<option value=22>22</option>
<option value=23>23</option>
<option value=24>24</option>
</select>
</td>
</html>
