I want to if you select an option on the brandSelect, the option on the socketSelect will appear, and I have a code like this
<select id="brandSelect" onchange="brandSelect()">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="socketSelect">
<option>Pilih Socket</option>
</select>
and
function brandSelect(){
var x = document.getElementById("brandSelect");
var selectedValue = x.options[x.selectedIndex].value;
switch(selectedValue){
case 10:
break;
case 20:
var x = document.getElementById("socketSelect");
var am4 = document.createElement("option");
var am3 = document.createElement("option");
var am2 = document.createElement("option");
am4.text = "AM4";
am3.text = "AM3";
am2.text = "AM2";
x.add(am4);
x.add(am3);
x.add(am2);
break;
case 30:
break;
}
}
And why my code still won't work?
Your code does not work because in javascript, switch compare value using === which checks for both data type and value, and the value from x.options[x.selectedIndex].value; is string type while you compare with int type. You have to convert your value to integer type before comparing using switch.
<select id="brandSelect" onchange="brandSelect()">
<option value="10">Pilih Brand</option>
<option value="20">AMD</option>
<option value="30">Intel</option>
</select>
<select id="socketSelect">
<option>Pilih Socket</option>
</select>
<script type="text/javascript">
function brandSelect(){
var x = document.getElementById("brandSelect");
var selectedValue = parseInt(x.options[x.selectedIndex].value); //parse your value to integer
switch(selectedValue) {
case 10:
break;
case 20:
var y = document.getElementById("socketSelect");
var am4 = document.createElement("option");
var am3 = document.createElement("option");
var am2 = document.createElement("option");
am4.text = "AM4";
am3.text = "AM3";
am2.text = "AM2";
y.add(am4);
y.add(am3);
y.add(am2);
break;
case 30:
break;
}
}
</script>
Demo: https://jsfiddle.net/t7umjq2y/
Related
I have two select element and I want to show some options in second select based on what user choose at first select.
consider first select have two options : a , b ...
if user choose 'a' from first select :
the second select optiones should be -> c , d ...
and if user choose 'b' from first select :
the second select optiones should be : e , f ...
I have done some coding but the problem is at the start when user doesnt choose any option from first select the second select is always empty(it should show c , d)
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>
If you can save the option values in a lookup object (or JSON):
function setOptions(select, values) {
for (var i = select.length = values.length; i--; )
select[i].innerText = values[i]
}
function value(select) { return select.value || select[0].value } // 1st item by default
var data = { 1: { 1.1: [1.11, 1.12], 1.2: [1.21, 1.22] },
2: { 2.1: [2.11, 2.12], 2.2: [2.21, 2.22], 2.3: [2.31, 2.32, 2.33] } }
s2.onchange = function() { setOptions(s3, data[value(s1)][value(s2)]) }
s1.onchange = function() { setOptions(s2, Object.keys(data[value(s1)])); s2.onchange() }
setOptions(s1, Object.keys(data)); s1.onchange(); // fill the options
<select id=s1 required size=3></select>
<select id=s2 required size=3></select>
<select id=s3 required size=3></select>
This code is based on JavaScript (No need for jQuery)
change Id name and value (x=="desire_value") according to your code
function myFunction() {
var x = document.getElementById("select1").value;
if (x == "3") document.getElementById("select2").style.display = "block";
else document.getElementById("select2").style.display = "none";
}
<select id="select1" onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
You have to write the functionality outside of onchange(). Try the following:
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
let element = document.getElementById("s1");
let selOption = element.options[element.selectedIndex].value;
if(selOption == 'a'){
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required > </select>
Why don't you just put that hard coded...
<!DOCTYPE html>
<html>
<body>
<select id="s1" required>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="c">c</option>
<option value="d">d</option>
</select>
<script>
document.getElementById("s1").onchange = function() {
document.getElementById('s2').disabled = false; //enabling s2 select
document.getElementById('s2').innerHTML = ""; //clear s2 to avoid conflicts between options values
var opt0 = document.createElement('option');
var opt1 = document.createElement('option');
if (this.value == 'a') {
opt0.textContent = "c";
opt1.textContent = "d";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
} else if (this.value == 'b') {
opt0.textContent = "e";
opt1.textContent = "f";
document.getElementById('s2').appendChild(opt0);
document.getElementById('s2').appendChild(opt1);
}
};
</script>
</body>
</html>
One approach to contemplate is populating the dependant dropdowns with all values and use a data attribute for the parent-child relationship. Javascript then clones and removes the options for later insertion.
The functional javascript is now very lean and the dependency relationships are maintained in the DOM.
var s2Clone;
// Doesn't work in older IEs
//CLone the Dependant drop down and hide
document.addEventListener('DOMContentLoaded', function(){
s2Clone = document.getElementById("s2").cloneNode(true);
document.getElementById("s2").innerHTML = "";
}, false);
document.getElementById("s1").onchange = function() {
var selected = this.value;
//Get the nodes with a parent attribute of the selected data
var optionsToInsert = s2Clone.querySelectorAll("[data-parent='" + selected +"']");
//clear existing
var s2 = document.getElementById("s2");
s2.innerHTML = "";
//Add The new options.
for(i = 0; i < optionsToInsert.length; i++)
{
s2.appendChild(optionsToInsert[i]);
}
}
<select id="s1" required>
<option value="">Please select</option>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="s2" required >
<option value="a1" data-parent="a">a - 1</option>
<option value="a2" data-parent="a">a - 2</option>
<option value="a3" data-parent="a">a - 3</option>
<option value="b1" data-parent="b">b - 1</option>
<option value="b2" data-parent="b">b - 2</option>
<option value="b3" data-parent="b">b - 3</option>
</select>
I have made this function here to calculate prices from choices in the select menu. I have made a switch but I dont understand where to input my function to trigger it (on html). The 2 other functions changeit() and changerepas() are onchange functions that will give you the basic price. (they are not linked to the question) (Note: This is my first switch ever, so it might look noobish to most of you. )
function taxesrepas(option){
var soustot;
var taxes;
var taxer;
var taxetotal = taxes + taxer;
var total = taxetotal + soustot;
var pricee;
var pricer;
var soustot = pricee + pricer;
switch (option){
case "spaghetti":
taxer = 0.69;
pricer = 8.95
break;
case "lasagne":
taxer = 0.75;
pricer = 9.95;
break;
case "salade":
taxes = 0.45;
pricee = 5.95;
break;
case "escargot":
taxes = 0.38;
pricee = 4.95;
break;
}
document.getElementById("taxes").innerHTML = taxetotal;
document.getElementbyid("total").innerHTML = total;
document.getElementbyid("soustot").innerHTML = soustot;
}
<select name="entree" id="entree" onChange="changeit(this.value)">
<option value="hidden" selected>Choisir...</option>
<option value="salade">Salade</option>
<option value="escargot">Escargot</option>
</select>
<img display="inline" id="imgselect" src="" alt="0.00$"/>
<h3 id= "choix1"></h3>
<p>Repas</p>
<select name="repas" id="repas" onChange="changerepas(this.value)">
<option value="hidden1" selected>Choisir...</option>
<option value="spaghetti">Spaghetti</option>
<option value="lasagne">Lasagne</option>
</select>
<h3 id="choix"></h3>
<h3 id="taxes"></h3>
<h3 id="soustotal"></h3>
<h3 id="total"></h3>
Maybe change the onChange to
function(){
taxesrepas(this.value);
changeit(this.value);
}
Below are my codes which allows user to select multiple values from the drop down list and when the user clicks the button 'Go' the selected values will be displayed on the new page. I've also created classes for both attributes in order to list the selected values.
Unfortunately, when the button is clicked after selections, nothing is being displayed. Need help on this.
"mainTest.html" page.
< script type = "text/javascript" >
(function() {
/**
* Handles the click of the submit button.
*/
function onSubmitClicked(event) {
var url = 'newPageTest.html?';
var foodbevs = document.getElementsByClassName('foodbeverage');
for (var i = 0; i < foodbevs.length; i++) {
if (i > 0) url += '&';
url += 'foodbeverage=' + encodeURIComponent(foodbevs[i].value);
}
var statuses = document.getElementsByClassName('status');
for (i = 0; i < statuses.length; i++) {
url += '&status=' + encodeURIComponent(statuses[i].value);
}
location.href = url;
}
// Get the button from the DOM.
var submitButton = document.getElementById('btngo');
// Add an event listener for the click event.
submitButton.addEventListener('click', onSubmitClicked);
})();
<
/script>
<!DOCTYPE html>
<html>
<body>
<h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h4>
<table>
<tr>
<td>
<B>Choose a Food/Beverage : </B>
<select class="foodbeverage">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>
</select>
<br/>
<B>Choose a Food/Beverage : </B>
<select class="foodbeverage">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>
<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>
</select>
<br/>
</td>
<td>
<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>
<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>
</td>
</tr>
</table>
<br/>
<br/>
<input type="submit" id="btngo" value="Go" />
<br/>
</body>
</html>
"newPageTest.html" page.
< script type = "text/javascript" >
function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}
//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
window.onload = passParameters;
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}
<
/script>
<!DOCTYPE html>
<html>
<body>
<div id="showdata"></div>
</body>
</html>
I find 2 mistake from your code.
Put the window.onload = passParameters; outside of your passParameters function.
For example:
function passParameters() {
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}
window.onload = passParameters;
The parseQuery return {"?foodbeverage":"Chicken Chop","foodbeverage":"Pasta","status":["Dine In","Take Away"]} from input query ?foodbeverage=Chicken%20Chop&foodbeverage=Pasta&status=Dine%20In&status=Take%20Away
You may want to add str = str.substr(1); before var s = str.split("&");
For example
function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
str = str.substr(1);
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];
}
return query;
}
So I have this project where I have to make a clothing store and I want to do the following:
I have this code in html:
<select class="sizeb" style="display: none;">
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
and with JavaScript I want to take the option value, check it's value and create a var price; then check and set a price:
var x = <somehow to get the value>;
if (x == 'xxs')
price = 5;
else if(x == 'xs')
price = 10;
and display it later this way:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
Any help is appreciated.
First, you just get a reference to the HTML element and assign that to a variable:
var select = document.querySelector(".sizeb");
Then you get the value:
var val = select.value;
Then you do your logic and calculations:
var x = <somehow to get the value>;
if (x == 'xxs'){
price = 5;
} else if(x == 'xs') {
price = 10;
}
And, then display the result:
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
NOTE: You have your select to be hidden initially. If that's the case, no one will ever be able to select a value from it.
Now, you also have to decide "when" you want all this to be done. That could be when the value in the select changes. BUt, if that's the case, you should add a first option of something like --- Select One ---, because if the user wants the first selection, they won't do anything, which won't trigger the change event. So, putting it all together, we get:
// Get a reference to the select
var select = document.querySelector(".sizeb");
// Set up an event handler that runs when the value in the select changes:
select.addEventListener("change", function(){
// Then you get the value:
var x = select.value;
var price = null;
// Then you do your logic and calculations.
// And if will work, but for this a switch is better
switch (x) {
case 'xxs' :
price = 5;
break;
case 'xs' :
price = 10;
break;
case 's' :
price = 15;
break;
case 'm' :
price = 20;
break;
case 'l' :
price = 25;
break;
case 'xl' :
price = 30;
break;
case 'xxl' :
price = 35;
break;
}
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
});
<select class="sizeb">
<option value="">--- Select One ---</option>
<option value="xxs">XXS</option>
<option value="xs">XS</option>
<option value="s">S</option>
<option value="m">M</option>
<option value="l">L</option>
<option value="xl">XL</option>
<option value="xxl">XXL</option>
</select>
<div id="PriceTag"></div>
You can:
1-Add an listener to the select like this
<select onchange="someFunction(this)" class="sizeb" style="display: none;>
2-create a function like this:
function someFunction(element){
va price = element.value;
document.getElementById("PriceTag").innerHTML = "Pret: " + price + " RON";
}
This is what I'm trying to do:
The user selects either option "One" or option "Two".
If the user select "One" the result is 66 + 45 or if the user select "Two" the result is 35 + 45.
How can I implement this using HTML and JavaScript?
This is what I've done so far:
HTML:
<select id="number">
<option>One</option>
<option>Two</option>
</select>
...
// Result
<div id="result"></div>
JAVASCRIPT:
function test(eventInfo) {
var userSelection = document.getElementById("number").value;
if () {
result = 66 + 45;
} else {
result = 35 + 45;
}
var greetingString = userSelection;
document.getElementById("result").innerText = greetingString;
}
Consider:
<select id="number">
<option value="66">One</option>
<option value="35">Two</option>
</select>
then:
result = 45 + +document.getElementById("number").value;
How about this. Set the values in data-attribute and calculate the sum.
<select id="number">
<option value="1" data-Values="66,45">One</option>
<option value="2" data-Values="35,28">Two</option>
</select>
<div id="result"></div>
JS
var values = this.options[this.selectedIndex].getAttribute('data-Values');
var sum = eval(values.split(',').join('+')); //Use with caution eval.
document.getElementById("result").innerHtml = sum;
Demo
Why don't you use value:
<select id="number">
<option value="66+45">One</option>
<option value="35+45">Two</option>
</select>
var greetingString = $("#number option:selected").val();
// or document.getElementById("number").value;
document.getElementById("result").innerText = greetingString;
Use Switch Statement:
Html:
<select id="number">
<option value="66">One</option>
<option value="35">Two</option>
</select>
Javascript:
var userSelection = document.getElementById("number").value;
switch (userSelection)
{
case 66:
result = 66 + 45;
break;
case 35:
result = 35 + 45;
break;
}
You can try this one:
<select id="number" onchange="test(this.value);">
<option value="66+45">One</option>
<option value="35+45">Two</option>
</select>
...
// Result
<div id="result">here</div>
JS
<script>
function test(val) {
document.getElementById("result").innerHtml = val;
}
</script>