I'm trying to insert two dropdown boxes in my website where the selected option in the first dropdown influences the options in the second dropdown box. I can't understand why it won't work as when I click 'Car' in option 1 it has no effect on the options in the second dropdown box rather than fetching the relevant data.
< script type = "text/javascript" >
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = " ";
if (s1.value = "Car") {
var optionArray = ["|", "honda|Honda", "bmw|Bmw", "fiat|Fiat"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
S2.options.add(newOption);
}
} <
/script>
<form action="https://www.carlink.co.uk/products.php">
<select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
<option disabled selected="Vehicle Type">Vehicle Type</option>
<option value="Car">Car</option>
<option value="Van">Shotgun</option>
<option value="Bike">Air rifle</option>
<option value="Train">Air pistol</option>
</select>
<select name="slct 2" id="slct 2">
<option disabled selected="make">Make</option>
</select>
I tested your code in JS Fiddle and the console logs an error:
Uncaught ReferenceError: S2 is not defined
Your S2.options... should be s2.options...
Easy fix!
Try this. You had a couple of errors in your code. You should also try using a 3d array instead of spliting by | later on.
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
if (s1.value == "Car") {
var optionArray = [["", ""], ["honda", "Honda"], ["bmw","Bmw"], ["fiat", "Fiat"]];
}
s2.innerHTML = "";
for (let option in optionArray) {
var newOption = document.createElement("option");
newOption.value = optionArray[option][0];
newOption.innerHTML = optionArray[option][1];
s2.options.add(newOption);
}
}
<form action="https://www.carlink.co.uk/products.php">
<select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
<option disabled selected="Vehicle Type">Vehicle Type</option>
<option value="Car">Car</option>
<option value="Van">Shotgun</option>
<option value="Bike">Air rifle</option>
<option value="Train">Air pistol</option>
</select>
<select name="slct 2" id="slct 2">
<option disabled selected="make">Make</option>
</select>
</form>
There's 2 main issues with your code
Instead of using lower case s2 you are accessing S2.options
You are using s1.value = "Car" which is simply invalid, it does not compare s1.value with "Car" you should be using the == or === operator(s)
Here is a working version
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = " ";
if (s1.value == "Car") { // You were using = instead of ==
var optionArray = ["|", "honda|Honda", "bmw|Bmw", "fiat|Fiat"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption); // Here you are using S2
}
}
<form action="https://www.carlink.co.uk/products.php">
<select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2')">
<option disabled selected="Vehicle Type">Vehicle Type</option>
<option value="Car">Car</option>
<option value="Van">Shotgun</option>
<option value="Bike">Air rifle</option>
<option value="Train">Air pistol</option>
</select>
<select name="slct 2" id="slct 2">
<option disabled selected="make">Make</option>
</select>
Related
My website has a search bar comprised of 5 different dropdown boxes. The option selected in the first dropdown box influences the options available in the second and last dropdown box. I've managed to make this work for the second dropdown box but not the last. I tried to achieve this for the last dropddown box by duplicating the javascript and changing the values from s2 to s5 and then changing the optionArray but this stops the second dropbox from working and has no effect on the 5th dropdown box. How do I make the selected option in dropdown 1 influence the options in both dropdown 2 and dropdown 5?
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
if (s1.value == "Rifle") {
var optionArray = [["", ""], ["Bolt-Action","Bolt-Action"],["Single-shot","Single-shot"], ["Lever Action", "Lever Action"]];
} else if (s1.value == "Shotgun") {
var optionArray = [["", ""], ["Pump-Action","Pump-Action"],["Folding","Folding"], ["Lever Action", "Lever Action"]];
}
s2.innerHTML = "";
for (let option in optionArray) {
var newOption = document.createElement("option");
newOption.value = optionArray[option][0];
newOption.innerHTML = optionArray[option][1];
s2.options.add(newOption);
}
}
function populate(s1, s5) {
var s1 = document.getElementById(s1);
var s5 = document.getElementById(s2);
if (s1.value == "Rifle") {
var optionArray = [["", ""], ["22LR","22LR"],["17HMR","17HMR"], ["9mm", "9mm"]];
} else if (s1.value == "Shotgun") {
var optionArray = [["", ""], ["12G","12G"],["20G","20G"], ["410G", "410G"]];
}
s5.innerHTML = "";
for (let option in optionArray) {
var newOption = document.createElement("option");
newOption.value = optionArray[option][0];
newOption.innerHTML = optionArray[option][1];
s5.options.add(newOption);
}
}
<form action="http://www.gunlink.co.uk/products.php">
<select name="slct 1" id="slct 1" onchange="populate('slct 1','slct 2','slct 5')">
<option disabled selected="Gun Type">Gun Type</option>
<option value="Rifle">Rifle</option>
<option value="Shotgun">Shotgun</option>
</select>
-------------
<select name="slct 2" id="slct 2">
<option disabled selected="Action">Action</option>
</select>
-------------
<select name="slct 3" id="slct 3">
<option disabled selected="Make">Make</option>
</select>
-------------
<select name="slct 4" id="slct 4">
<option disabled selected="Model">Model</option>
</select>
-------------
<select name="slct 5" id="slct 5">
<option disabled selected=".Cal">.Cal</option>
</select>
-------------
<input type="submit" value="Search"/>
</form>
<form action="http://www.gunlink.co.uk/products.php">
<select name="slct 1" id="slct-1" onchange="populate('slct-1','slct-2','slct-5')">
<option disabled selected="Gun Type">Gun Type</option>
<option value="Rifle">Rifle</option>
<option value="Shotgun">Shotgun</option>
</select>
-------------
<select name="slct-2" id="slct-2">
<option disabled selected="Action">Action</option>
</select>
-------------
<select name="slct 3" id="slct-3">
<option disabled selected="Make">Make</option>
</select>
-------------
<select name="slct 4" id="slct-4">
<option disabled selected="Model">Model</option>
</select>
-------------
<select name="slct 5" id="slct-5">
<option disabled selected=".Cal">.Cal</option>
</select>
-------------
<input type="submit" value="Search"/>
</form>
function populate(s1,s2,s5) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
var s5= document.getElementById(s5);
if (s1.value == "Rifle") {
var optionArray = [["", ""], ["Bolt-Action","Bolt-Action"],["Single-shot","Single-shot"], ["Lever Action", "Lever Action"]];
} else if (s1.value == "Shotgun") {
var optionArray = [["", ""], ["Pump-Action","Pump-Action"],["Folding","Folding"], ["Lever Action", "Lever Action"]];
}
s2.innerHTML = "";
for (let option in optionArray) {
var newOption = document.createElement("option");
newOption.value = optionArray[option][0];
newOption.innerHTML = optionArray[option][1];
s2.options.add(newOption);
}
if (s1.value == "Rifle") {
var optionArray = [["", ""], ["22LR","22LR"],["17HMR","17HMR"], ["9mm", "9mm"]];
} else if (s1.value == "Shotgun") {
var optionArray = [["", ""], ["12G","12G"],["20G","20G"], ["410G", "410G"]];
}
s5.innerHTML = "";
for (let option in optionArray) {
var newOption = document.createElement("option");
newOption.value = optionArray[option][0];
newOption.innerHTML = optionArray[option][1];
s5.options.add(newOption);
}
}
https://jsfiddle.net/ov4swak9/
Here is a gender dropdown menu which determines the uniform cost.
<p>Gender:
<select required name="gender" onchange="calc(this.id, 'uniform')" id="gender">
<option value="0" >Select...</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select> <p>
Cost of uniform drop down menu
<p>Cost of Uniform:
<select required name="uniform" id="uniform">
</select><p>
Here is my javascript code for the dependable Gender and uniform
<script>
function calc(u1,u2){
var u1 = document.getElementById(u1);
var u2 = document.getElementById(u2);
u2.innerHTML = "";
if (u1.value == "male"){
var optionArray = ["|","24300|N24,300"];
}
else if (u1.value == "female"){
var optionArray = ["|","26400|N26,400"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
u2.options.add(newOption);
}
}
</script>
Class (Year) drop down menu.
<p>Class:
<select required name="childClass" onchange="childClass(this.id, 'schoolFees')" id="childClass">
<option value="0" >Select...</option>
<option value="prenursery">Pre Nursery</option>
<option value="nursery">Nursery</option>
<option value="reception">Reception</option>
<option value="year1">Year One</option>
<option value="year2">Year Two</option>
<option value="year3">Year Three</option>
<option value="year4">Year Four</option>
<option value="year5">Year Five</option>
<option value="year6">Year Six</option>
</select>
<p>
School fees dropdown menu which depends on students class selected
<p>School Fees:
<select required name="schoolFees" id="schoolFees">
</select>
Javascript for the class and school fees dependable dropdown. I am sure there is a shorther method but this still works.
<script>
function childClass(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "prenursery"){
var optionArray = ["|","145000|N145,000"];
}
else if (s1.value == "nursery"){
var optionArray = ["|","145000|N145,000"];
}
else if (s1.value == "reception"){
var optionArray = ["|","147000|N147,000"];
}
else if (s1.value == "year1"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year2"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year3"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year4"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year5"){
var optionArray = ["|","149000|N149,000"];
}
else if (s1.value == "year6"){
var optionArray = ["|","149000|N149,000"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
How can I make the class(year) and gender dropdown determine the value in uniform dropdown. For example. If I select female and year 4 I should get a different value in dropdown.
check this https://jsfiddle.net/egq427g0/3/
I've modified the childClass to act accordingly the selection of Gender and Class
At the end of childClass calling calc function to reset uniform if 0 is selected in Class
here is my code. help me to solve this guys. appreciate all the answer given.
code:
<script type="text/javascript">
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "Futsal") {
var optionArray = ["|", "court a| Court A", "court b|Court B", "court c|Court C"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
<label class="item item-select">
<span class="input-label">Sports</span>
<select id="sport" name="sport" onchange="populate(this.id,'Court')" ;>
<option value=""></option>
<option value="Futsal">Futsal</option>
<option value="Badminton">Badminton</option>
</select>
</label>
<label class="item item-select">
<span class="input-label">Court</span>
<select id="Court" name="Court"></select>
This is giving error ReferenceError: populate is not defined
I'm using JS to dynamically populate a select list from the option of another select list. The population is working correctly, however once the second option is picked I want the user to be navigated to the girl URL. What am I missing?
< script type = "text/javascript" >
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "Chevy") {
var optionArray = ["|", "http://www.example.com|Camaro", "http://www.example.com|Corvette", "impala|Impala"];
} else if (s1.value == "Dodge") {
var optionArray = ["|", "http://www.example.com|Avenger", "http://www.example.com|Challenger", "http://www.example.com|Charger"];
} else if (s1.value == "Ford") {
var optionArray = ["|", "http://www.example.com|Mustang", "http://www.example.com|Shelby"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
< /script>
<select id="slct1" name="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Chevy">Chevy</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
</select>
<select id="slct2" name="slct2" onchange="form.submit()"></select>
Assuming your form looks like this:
<form name='form' id='exampleForm' action='whatever'>...</form>
your onchange event should look like this:
onchange="document.form.submit()"
or
onchange="document.getElementById('exampleForm').submit()"
Alternatively, you don't even need a form. You could do:
onchange="window.location.href='my.url'"
...or put it in a function:
onchange="foo()"
...
function foo() {
var s2 = document.getElementById('slct2');
window.location.href = "my.url?model=" + s2.options[s2.selectedIndex].value;
}
I am trying to auto fill 2 select boxes on a Web page.
When the user selects a class, select box 2 auto has options Main Spec the person plays. When the user selects Tank (for example), select box 3 auto has options for Race
I have managed it with 2nd getting populated from 1st but it has the 3rd options
http://daemonknight.atspace.co.uk/apply.php - to view page in question
<?php include("includes/classcheck.php"); ?>
<?php include("includes/racecheck.php"); ?>
<tr>
<td>Class</td>
<td><select id="class" name="class" onchange="populate('class','mainspec')")>
<option value="">Select</option>
<option value="Death Knight">Death Knight</option>
<option value="Druid">Druid</option>
<option value="Hunter"> Hunter </option>
<option value="Mage"> Mage </option>
<option value="Paladin">Paladin</option>
<option value="Priest"> Priest </option>
<option value="Rogue"> Rogue </option>
<option value="Shaman"> Shaman </option>
<option value="Warlock"> Warlock </option>
<option value="Warrior"> Warrior </option>
<option value="Monk"> Monk </option>
</select>
</td>
</tr>
<tr>
<td>Main Spec</td>
<td><select id="mainspec" name="mainspec" onchange="populate('mainspec','race')")></select></td>
</tr>
<tr>
<td>Race</td>
<td><select id="race" name="race"></select></td>
</tr>
-----------------classcheck.php------------------
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML ="";
if (s1.value=="Paladin"){
var optionArray=["|","Healer|Healer","Tank|Tank","DPS|DPS"];
} else if (s1.value=="Death Knight"){
var optionArray=["|","Tank|Tank","DPS|DPS"];
} else if (s1.value=="Druid"){
var optionArray=["|","Healer|Healer","Tank|Tank","MDPS|MDPS","RDPS|RDPS"];
} else if (s1.value=="Hunter"){
var optionArray=["|","DPS|DPS"];
}else if (s1.value=="Mage"){
var optionArray=["|","DPS|DPS"];
}else if (s1.value=="Priest"){
var optionArray=["|","Healer|Healer","DPS|DPS"];
}else if (s1.value=="Rogue"){
var optionArray=["|","DPS|DPS"];
}else if (s1.value=="Shaman"){
var optionArray=["|","Healer|Healer","DPS|DPS"];
}else if (s1.value=="Warlock"){
var optionArray=["|","DPS|DPS"];
}else if (s1.value=="Warrior"){
var optionArray=["|","Tank|Tank","DPS|DPS"];
}else if (s1.value=="Monk"){
var optionArray=["|","Tank|Tank","Healer|Healer","DPS|"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
----------------------racecheck.php--------------
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML ="";
if (s1.value=="Paladin"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Draenei|Draenei"];
} else if (s1.value=="Death Knight"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen"];
} else if (s1.value=="Druid"){
var optionArray=["|","Night Elf|Night Elf","Worgen|Worgen"];
} else if (s1.value=="Hunter"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
}else if (s1.value=="Mage"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
}else if (s1.value=="Priest"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
}else if (s1.value=="Rogue"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Worgen|Worgen","Pandaren|Pandaren"];
}else if (s1.value=="Shaman"){
var optionArray=["|","Dwarf|Dwarf","Draenei|Draenei","Pandaren|Pandaren"];
}else if (s1.value=="Warlock"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Gnome|Gnome","Worgen|Worgen"];
}else if (s1.value=="Warrior"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
}else if (s1.value=="Monk"){
var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Pandaren|Pandaren"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
</script>
use JQuery/Javascript, just like in the example
http://jsfiddle.net/4po4wt0x/
<select id='countries'>
<option></option>
<option value='scotland'> Scotland </option>
<option value='england'>England </option>
$("#countries").change( function() {
if ($("#countries").val()=='scotland') {
$("#cities").append("<option>Glasgow</option>");
$("#cities").append("<option>Edinburgh</option>")
}
});