My script works with the <select> to update a hidden paragraph on the template based on the values selected. This is working fine but my request here is to set conditionals for 2 select values for each car. For example, if I select Audi + Red I want to show, say: "Beautiful Car". For BMW + Black: "Black BMW for sale".
Basically I want to create an output based on the values selected from both <select> fields and I want to create 8 unique values for each car brand and color.
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<select id="Variants">
<option value="Black"> Black
<option value="Red">Red
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
let messages = {
Audi: 'RandomData1',
BMW: 'RandomData2',
Mercedes: 'RandomData3',
Volvo: 'RAndomData4'
}
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = `${messages[x]}`;
}
</script>
</body>
</html>
I think this is what you are trying to achieve. The solution was to generate objects matching the drop-down values for the color and manufacturer.
<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<select id="Variants" onchange="myFunction()">
<option value="Black"> Black
<option value="Red">Red
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
let messages = {
"Audi":{"Black":"audi color black","Red":"audi color red"},
"BMW":{"Black":"BMW color black","Red":"BMW color red"},
"Mercedes":{"Black":"Mercedes color black","Red":"Mercedes color red"},
"Volvo":{"Black":"Volvo color black","Red":"Volvo color red"}};
var x = document.getElementById("mySelect").value;
var y = document.getElementById("Variants").value;
document.getElementById("demo").innerHTML = messages[x][y];
}
</script>
</body>
</html>
function myFunction() {
let messages = {
black0: 'Black Audi',
red0: 'Red Audi',
black1: 'Black BMW',
red1: 'Red BMW',
black2: 'Black Mercedes',
red2: 'Red Mercedes',
black3: 'Black Volvo',
red3: 'Red Volvo'
};
var car = document.getElementById("mySelect").value;
var color = document.getElementById("Variants").value;
document.getElementById("demo").innerHTML = `${messages[color+car]}`;
}
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="0">Audi
<option value="1">BMW
<option value="2">Mercedes
<option value="3">Volvo
</select>
<select id="Variants" onchange="myFunction()">
<option value="black"> Black
<option value="red">Red
</select>
<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p>
<p id="demo"></p>
</body>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have two listbox based on frist listbox value i want to select value in 2nd listbox.
example-when i select Fruit in first list box then in 2nd list box there should Banana,Apple and Orange.I am very new to hta.
<html>
<head>
<title></title>
<HTA:APPLICATION
APPLICATIONNAME=""
ID=""
VERSION="1.0"/>
</head>
<body bgcolor="white">
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
</body>
</html>
You can try something like this HTA :
<html>
<Title>Use hta to change a second listbox based on the first select listbox</Title>
<head>
<HTA:APPLICATION
APPLICATIONNAME=""
ID=""
VERSION="1.0"/>
</head>
<SCRIPT Language="VBScript">
Option Explicit
Dim Categories,Animals,Birds,Cars,Fruits,objOption
Categories = Array("Animals","Birds","Cars","Fruits")
Animals = Array("Bear","Fox","Wolf")
Birds = Array("Eagle","Hawk","Owl")
Cars = Array("Audi","BMW","Mercedes","Toyota")
Fruits = Array("Apple","Banana","Orange")
'-----------------------------------------------------------
Sub Window_Onload()
Fill_All_Categories()
Filter_by_Categorie(Select1.Value)
End Sub
'----------------------------------------------------------
Sub Fill_All_Categories()
Dim Cat
For Each Cat In Categories
Set objOption = Document.createElement("OPTION")
objOption.Text = Cat
objOption.Value = Cat
SelectAll.Add(objOption)
Next
End Sub
'----------------------------------------------------------
Sub Filter_by_Categorie(All)
Dim Animal,Bird,Car,Fruit
ClearListbox
All = selectAll.Value
Select Case All
Case "Animals"
For Each Animal In Animals
Set objOption = Document.createElement("OPTION")
objOption.Text = Animal
objOption.Value = Animal
Select1.Add(objOption)
Next
Case "Birds"
For Each Bird In Birds
Set objOption = Document.createElement("OPTION")
objOption.Text = Bird
objOption.Value = Bird
Select1.Add(objOption)
Next
Case "Cars"
For Each Car In Cars
Set objOption = Document.createElement("OPTION")
objOption.Text = Car
objOption.Value = Car
Select1.Add(objOption)
Next
Case "Fruits"
For Each Fruit In Fruits
Set objOption = Document.createElement("OPTION")
objOption.Text = Fruit
objOption.Value = Fruit
Select1.Add(objOption)
Next
End Select
End sub
'---------------------------------------------------------
Sub ClearListbox()
For Each objOption in Select1.Options
objOption.RemoveNode
Next
End Sub
'--------------------------------------------------------
</script>
<select name="SelectAll" id="SelectAll" OnChange="Filter_by_Categorie(Select1.Value)"></select>
<select name="Select1" id="Select1"></select>
</body>
</html>
based on another answer what about this code?
<html>
<head>
<title></title>
<HTA:APPLICATION
APPLICATIONNAME=""
ID=""
VERSION="1.0"/>
</head>
<body bgcolor="white">
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="-1">Select the Fruit you want</option>
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>
<script type="text/javascript">
document.getElementById('select1').onchange=function(){
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var options1 = select1.getElementsByTagName('option');
var options2 = select2.getElementsByTagName('option');
var optCount = options2.length;
for ( var i = 0; i < optCount; i++) {
if (options2[i].getAttribute('value') === select1.value) {
options2[i].style.display = 'block'
} else if (options2[i].getAttribute('value') != -1) {
options2[i].style.display = 'none'
} else {
options2[i].label = 'Select the ' + options1[select1.value-1].label + ' you want';
}
select2.value =-1;
}
}
</script>
</body>
</html>
i want when selected option color from dropdown list then displaye selected text in id="name_text"
i could not change Html form code I want only when selected option then display text selected
my code is not work :(
<select id="property-transection" name="property-transection">
<option value=""></option>
<option value="53"> Blue </option>
<option value="24"> Green </option>
<option value="31"> Black </option>
</select>
<div id="name_txt">You selected (BLUE Or Green Or Black)</div>
<script>
$(document).on('change', '#property-transection', function() {
$('#name_txt').text($(this).val());
var po = this.val();
if( po = '53'){
var vb="BLUE COLOR SELECTED";
$('#noate_o').text(vb);
}
});
</script>
This should work for you:
<select id="property-transaction" name="property-transaction">
<option value=""></option>
<option value="53">Blue</option>
<option value="24">Green</option>
<option value="31">Black</option>
</select>
<div id="name_txt">Color Name Populates Here</div>
<script>
$(document).on('change', '#property-transaction', function() {
$('#name_txt').text($('#property-transaction option:selected').text());
});
</script>
Here's a working example:
https://jsfiddle.net/w73bzgos/2/
I have a system where you are able to choose a car. You can then choose the transmission and color. Different cars and transmissions bring up different colors. Not sure how to make an image appear of a car when a color is chosen. So for example I choose the rs6 and automatic and then the black color. I would then want an image to appear depending on the color chosen. How would I program it so different cars and colors bring up different images. Im relatively new to coding. Any help would be aprreciated.
HTML
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1 /jquery.min.js"/
</script>
<script src="configurator.js"></script>
</body>
</html>
Javascript
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
For now it is only working for Audi - Automatic - black and blue to show you the basic idea but it is repeating code and you can do the same for the rest of the cars too.
In this example I am setting the src of the image as the car selected. For example if you select car1 and man and red then src of the image as car1manred.jpg, also I'm changing the alt attribute as well so that you can see the change.
you have to do a lot of manual work. I have created an object for the data that will determine how many cars you have in each category. It would be better if you use JSON for that.
Also I have made car1autoblack (which gets the src of the images) as an array but you can make it as an object and include other things about the cars in this category. for example name, price, availability and much more
$("#car").change(function () {
transmission();
selection();
});
$("#trans").change(function () {
transmission();
selection();
});
$("#color").change(function () {
selection();
});
var cars = {
car1autoblack:["car1auto1black1.png","car1auto1black2.jpg"],
car1autoblue:["car1auto1blue1.png","car1auto1blue2.jpg","car1auto1blue3.jpeg"]
}
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
function selection(){
if ($("#car").val() && $("#trans").val() && $("#color").val()) {
var carVal = $("#car").val();
var transVal = $("#trans").val();
var colorVal = $("#color").val();
var combineVal = carVal+transVal+colorVal;
//var imageLink = combineVal+".jpg";
//$("#showImg").attr("src", imageLink);
//$("#showImg").attr("alt", imageLink);
//console.log(cars[combineVal]);
var inputDivHTML = "";
var car = cars[combineVal];
for(i in car){
inputDivHTML += "<img class='showImg' src='"+car[i]+"' alt='"+car[i]+"'/>";
}
$(".imageHere").html(inputDivHTML);
}
}
img.showImg{
width:150px;
height:70px;
margin:10px 3px;
border:1px solid red;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<div class="imageHere">
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
</div>
I'm trying to display ALL selected values in a drop down list. The code shown below works to display only the first value however I'm struggling on understanding how to get it to display each value that is selected.
function myFunction() {
var x = document.getElementsByName("Car").item(0).value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
<p>Select a new car from the list.</p>
<select name="Car" multiple="on" size="5" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<br>
The car is:
<p id="demo"></p>
https://jsfiddle.net/2gq824q2/12/
Why not use jQuery when you can?
function myFunction() {
var x = $('#car').val()
$('#demo').html("You selected: " + x.join(", "))
}
$('#car').change(function() {
myFunction();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Select a new car from the list.</p>
<select id="car" name="Car" multiple="on" size="5">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<br>
The car is:
<p id="demo"></p>
Here you go: https://jsfiddle.net/2gq824q2/15/
function myFunction() {
var sSelected = '';
[].forEach.call( document.querySelectorAll('#Car :checked') , function(elm){
if(sSelected !== '') sSelected += ', ';
sSelected += elm.value;
})
document.getElementById("demo").innerHTML = "You selected: " + sSelected;
}
<p>Select a new car from the list.</p>
<select id="Car" multiple="on" size="5" onchange="myFunction()">
<option value="Audi">Audi
<option value="BMW">BMW
<option value="Mercedes">Mercedes
<option value="Volvo">Volvo
</select>
<br>
The car is:
<p id="demo"></p>
I updated the function, and note the select now has an ID.
<!DOCTYPE html>
<html>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
</form>
<p>Click the button to change the selected fruit to banana.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("mySelect").value = "banana";
}
</script>
</body>
</html>
This is from here setting value of select option on button click. When button is clicked the value will be banana when i change the value of banana with banana 1 it is not showing anymore.How to make it in a way that it will still accept the value even if there is a space
Also if you are checking for banana 1 there should be a value called banana 1 so it gets the value . Otherwise it will just give a blank dropdown as it cant find that value.
For checking for banana 1 you will have to change the function's checking value
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#make_ora").click(function () {
$("#mySelect").val("banana 1");
});
});
</script>
</head><body>
Select your favorite fruit:
<select id="mySelect" class ="mys">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana 1">Banana 1</option>
</select>
<br/>
<br/>
<br/>
<input type='button' value='Change to banana 1' id='make_ora'>
</body>
</html>
Setting value of Selection tag will reflect only if any one of options value matches with set value. If you want to set value as "banana 1" it should have Banana.
Use This:-
var c=document.getElementById("mySelect");
c.value="banana 1";
alert(c.value);/* Only For Check*/
<script>
<option value="banana 1">Banana 1</option>
function myFunction() {
document.getElementById("mySelect").value = "banana 1";
}
</script>
First do above change in your w3schools editor
Then click on "See Result"
Then click on "Try it"
It should work
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
From among the option values there is no "banana1" in the select option value.so thats why it is not appearing .
instead of choose other option values like---orange (or)pineapple..
its working.