I am trying to create the select application using Javascipt only. I got to know about this code on internet and it uses the split method to return value and .innerHTML. Now say if I do not want to use the split method and just return with .innerHTML into html element with no value, how to do that using for loop as used in this code ?
<!DOCTYPE html>
<html>
<head>
<title>Select Options</title>
</head>
<body>
<h2>Choose your car</h2>
<hr>
Choose Car Make:
<select id="slct1" onchange="populate(this.id,'slct2')">
<option value=""></option>
<option value="Hyundai">Hyundai</option>
<option value="Honda">Honda</option>
<option value="Maruti">Maruti</option>
</select>
<hr>
Choose Car Model
<select id="slct2" ></select>
</body>
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Hyundai") {
var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"]
}
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>
</html>
You have to be aware, that using for... in loop over an array, won't return you the elements actually, but their indexes. I would suggest you to use simple for loop instead.
function populate(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
var optionArray = ["i10", "i20", "Verna"];
for (var i = 0; i < optionArray.length; i++) {
var newOption = document.createElement('option');
newOption.value = optionArray[i];
newOption.innerHTML = optionArray[i];
s2.appendChild(newOption);
}
}
<h2>Choose your car</h2>
<hr> Choose Car Make:
<select id="slct1" onchange="populate('slct1','slct2')">
<option value=""></option>
<option value="Hyundai">Hyundai</option>
<option value="Honda">Honda</option>
<option value="Maruti">Maruti</option>
</select>
<hr> Choose Car Model
<select id="slct2"></select>
Removing or simply commenting (may be you would require it in future) few lines should do what you want:
<script type="text/javascript">
function populate(s1,s2){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if(s1.value == "Hyundai") {
var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"]
}
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>
With above code, you are no using .split() and just assigning the whole object to the new element.
Left value to "" to keep it empty.
for(var option in optionArray){
var text = optionArray[option];
var newOption = document.createElement('option');
newOption.value = "";
newOption.innerHTML = text;
s2.options.add(newOption, null);
}
Related
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>
This question already has answers here:
Why JS function name conflicts with element ID?
(3 answers)
Closed 2 years ago.
its working fine until i put the tag on select category can someone help me a bit , after i put the tag its just not working..
function category(s1, s2) {
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
s2.innerHTML = "";
if (s1.value == "letters") {
var optionArray = ["a|a", "b|b"];
} else if (s1.value == "numbers") {
var optionArray = ["1|1", "2|2"];
} else if (s1.value == "soon") {
var optionArray = ["|", "|", "|"];
}
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);
}
}
<form>
<select id="category" onchange="category('category','subcategory')">
<option value=""></option>
<option value="letters">Letters</option>
<option value="numbers">Numbers</option>
</select>
<br>
<select id="subcategory"> </select>
<br>
</form>
To be compatible with older browsers, whenever you give an ID to some HTML element it's registered in a global scope under window so your category doesn't refer to the function but to the select element. Just name the function differently
I am creating a select option for Birthdate which includes Month and Date for testing purposes for now. Everything works fine but the problem is when i select January for instance then it will give days upto 31 but if i 31 remains selected and when i select Febraury it adds previous array with new array i.e. January's 31 days + Febraury 28 days. Please help me how do I clear previous array first then add new one.
Here's The Javascript:
function change(){
var s1 = document.getElementById('select1');
var s2 = document.getElementById('select2');
var i;
var optionIndex = [];
if(s1.value === 'January'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 31; i = i + 1){
optionIndex.push(i);
}
}else if(s1.value === 'February'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 28; i = i + 1){
optionIndex.push(i);
}
}
var option;
for(option in optionIndex){
if(optionIndex.hasOwnProperty(option)){
var pair = optionIndex[option];
var createOption = document.createElement('option');
createOption.innerHTML = pair;
s2.appendChild(createOption);
}
}
}
And the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Selector</title>
</head>
<body>
<select id = "select1" name = "select1" onchange="change()">
<option>Select Year...</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select id = "select2" name = "select2" style = "display:none;">
</select>
</body>
</html>
I tried array.pop(), array.splice() but still doesn't work! Please help me!
your issue in not with array - it is good - the problem is that you don't clear s2 when you trigger change. Try
function change(){
var s1 = document.getElementById('select1');
var s2 = document.getElementById('select2');
var i;
var optionIndex = [];
if(s1.value === 'January'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 31; i = i + 1){
optionIndex.push(i);
}
}else if(s1.value === 'February'){
var i;
s2.style.display = 'inline-block';
for(i = 1; i <= 28; i = i + 1){
optionIndex.push(i);
}
}
s2.innerHTML = ""; // You need this
var option;
for(option in optionIndex){
if(optionIndex.hasOwnProperty(option)){
var pair = optionIndex[option];
var createOption = document.createElement('option');
createOption.innerHTML = pair;
s2.appendChild(createOption);
}
}
}
<select id = "select1" name = "select1" onchange="change()">
<option>Select Year...</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select id = "select2" name = "select2" style = "display:none;">
</select>
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;
}