I am trying to create a dropdown menu with options that bring up a different alert message for each option.
For example, a dropdown menu was created with the options "Algebra" "Chemistry" and "English 3". I want an alert "Geometry course required" to pop up for Algebra. "Biology course required" for Chemistry, and "English 1 and 2 courses required for English.
How do I do this? Thanks! I pretty much just need help with the function.
<select id="test-dropdown" onchange="choice1(this)">
<option value="1">Algebra</option>
<option value="2">Chemistry</option>
<option value="3">English 3</option>
</select>
Here is an example - I am not using alert but instead change a text on the page
I also moved the event handler definition to the script instead of inline
Note I also added a "Please select" since you cannot show the text for Algebra if it is already selected when loading
var choices = ["","Geometry course required","Biology course required","English 1 and 2 courses required"];
window.onload=function() {
document.getElementById("test-dropdown").onchange=function() {
document.getElementById("choice").innerHTML=choices[this.value];
}
document.getElementById("test-dropdown").onchange(); // show default
}
<select id="test-dropdown">
<option value="0">Please select</option>
<option value="1">Algebra</option>
<option value="2">Chemistry</option>
<option value="3">English 3</option>
</select>
<span id="choice"></span>
Without the Please select
var choices = ["","Geometry course required","Biology course required","English 1 and 2 courses required"];
window.onload=function() {
document.getElementById("test-dropdown").onchange=function() {
document.getElementById("choice").innerHTML=choices[this.value];
}
document.getElementById("test-dropdown").onchange(); // show default
}
<select id="test-dropdown">
<option value="1">Algebra</option>
<option value="2">Chemistry</option>
<option value="3">English 3</option>
</select>
<span id="choice"></span>
With alert
var choices = ["","Geometry course required","Biology course required","English 1 and 2 courses required"];
window.onload=function() {
document.getElementById("test-dropdown").onchange=function() {
if (this.value !== 0) alert(choices[this.value]);
}
}
<select id="test-dropdown">
<option value="0">Please select</option>
<option value="1">Algebra</option>
<option value="2">Chemistry</option>
<option value="3">English 3</option>
</select>
<span id="choice"></span>
var a = document.getElementById('test-dropdown');
a.addEventListener('change',function(){
var b = document.querySelectorAll('option:checked');
for(var i = 0; i < b.length; i++){
if(b[i].value == 1){
alert('Geometry course required')
}else if(b[i].value == 2 ){
alert('Biology course required')
}else{
alert('English 1 and 2 courses required for English')
}
}
});
<select id="test-dropdown">
<option value="0">select option</option>
<option value="1">Algebra</option>
<option value="2">Chemistry</option>
<option value="3">English 3</option>
</select>
Check this also in the [codepen] (https://codepen.io/scodek/pen/EboEQp),
function choice1(selected)
{
if(selected.options[selected.selectedIndex].text === "Algebra")
{
alert("Geometry course required");
}
else if(selected.options[selected.selectedIndex].text === "Chemistry")
{
alert("Biology course required");
}
else if(selected.options[selected.selectedIndex].text === "English 3")
{
alert("English 1 and 2 courses required for English");
}
}
Related
I have 2 selects. Both have the same options (taken from db). Let's say the options are:
Inventory 1
Inventory 2
Inventory 3
If I choose Inventory 1 in the first select, then in the second select it should disappear. If I choose Inventory 2 in the first select, then Inventory 1 should appear back in the second select and Inventory 2 should disappear.
This is my code so far:
$('#from-location').on('change', function() {
from_location_value = $('#from-location option:selected').val();
to_location_value = $('#to-location option:selected').val();
$("#to-location option[value=" + from_location_value + "]").hide();
});
Try this
$('#from-location').on('change', function() {
let fromValue = $('#from-location').val();
let options = $('#to-location option').show();
if( $(this).val() !== '' ){
options.siblings('option[value="' + fromValue + '"]').hide()
}
});
$('#to-location').on('change', function() {
let toValue = $('#to-location').val();
let options = $('#from-location option').show();
if( $(this).val() !== '' ){
options.siblings('option[value="' + toValue + '"]').hide()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from-location">
<option value=""></option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>
<select id="to-location">
<option value=""></option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>
I know you have already accepted an answer, but here's a different approach without duplicating code. There's only one event handler, and the behaviour you describe works for both selects - whichever option you select from whichever select will disappear from the other select.
In fact your question does not specify you want anything to happen for changes to the 2nd select, right? So this is just a demonstration of something maybe useful :-)
$('select').on('change', function() {
// Find the value we just chose
let selected = $(this).val();
// Find the select which was not just changed
let $otherSelect = $('select').not($(this));
// First unselect anything selected from the other select
$otherSelect.val('');
// Re-display everything from the other select
$('option', $otherSelect).show();
// Hide the currently selected option from the other select
$('option[value="' + selected + '"]', $otherSelect).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from-location">
<option value="">Please select</option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>
<select id="to-location">
<option value="">Please select</option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>
I have a select option list for my form and I want to make sure the user has selected one of the options. My function logic implies that if the user keeps the dropdown on the default option, an alert will pop up prompting them to change it. However, no alert shows up whatsoever. What am I doing wrong?
function isOption(form) {
var type = form.getElementByID("pastimetype")
var selectedValue = type.options[type.selectedIndex].value;
if (selectedValue == "selectpastime") {
alert("Please select a pastime.")
return false
}
return true
}
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="selectpastime">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
you need to add the function to the submit event of the form.
you misspelled getElementById
no need to use form.getElementById
easier to get the value using select.value
use preventDefault instead of returning true/false
Also
function isOption(e) {
var sel = document.getElementById("pastimetype");
var selectedValue = sel.value;
if (selectedValue == "") { // I removed the value from the "Please select"
alert("Please select a pastime.")
e.preventDefault(); // stop submission
}
}
window.addEventListener("load",function() {
document.getElementById("form1").addEventListener("submit",isOption)
})
<form id="form1">
<p><label for="pastime"> Favourite pastime: </label>
<select name="pastime" select id="pastimetype">
<option value="">---Please choose an option---</option>
<option value="surfingtheweb">Surfing the Web</option>
<option value="playingsport">Playing Sport</option>
<option value="listeningtomusic">Listening to Music</option>
<option value="watchingtv">Watching TV</option>
<option value="playinggames">Playing Games</option>
<option value="communityservice">Community Service</option>
<option value="daydreaming">Daydreaming</option>
<option value="reading">Reading</option>
<option value="meditation">Meditation</option>
</select>
</p>
<input type="submit" />
</form>
How can I compare both "statement A" and "Statement B" if is selected from dropdown menu, so that I can produce "C" results in somewhere else
Like let says, if A && B is selected, then change DOM " " into C.
code as below
<select id="imgList">
<option value="images/a.png" data-description="a">a</option>
<option value="images/b.png" data-description="b">b</option>
<option value="images/c.png" data-description="c">c</option>
<option value="images/d.png" data-description="d">d</option>
</select>
<select id="imgList2">
<option value="images/a.png" data-description="a">a</option>
<option value="images/b.png" data-description="b">b</option>
<option value="images/c.png" data-description="c">c</option>
<option value="images/d.png" data-description="d">d</option>
</select>
And
if (document.getElementById('imgList').value == 'images/a.png'&&
document.getElementById('imgList2').value == 'images/b.png') {
console.log("you got C");}
You can use the onchange event handler like this :
<select id="imgList" onchange="compare()">
<option value="images/a.png" data-description="a">a</option>
<option value="images/b.png" data-description="b">b</option>
<option value="images/c.png" data-description="c">c</option>
<option value="images/d.png" data-description="d">d</option>
</select>
<select id="imgList2" onchange="compare()">
<option value="images/a.png" data-description="a">a</option>
<option value="images/b.png" data-description="b">b</option>
<option value="images/c.png" data-description="c">c</option>
<option value="images/d.png" data-description="d">d</option>
</select>
function compare()
{
if (document.getElementById('imgList').value == 'images/a.png'&& document.getElementById('imgList2').value == 'images/b.png') {
console.log("you got C");
}
}
Documentation here : https://www.w3schools.com/jsref/event_onchange.asp
I am trying to make a simple "registry book" from a select HTML
The idea is 3 selecting options click confirm and based on the selected options make a price with a math formula or (don't know what is ) an array (in the sense of a table of like every var there) add a Hour:Minute from machine and place it in a paragraph.
It will work. (just learning HTML and CSS)
Math would be select2 * select3 with one exception in the case of [select2(option1 and option2) * select3 = samevalue)
With that aside can someone post a modular simplistic type of code that would Help.
For those who need to read some more:(copy&paste* - *Sorry for indentation)
document.getElementById("Confirm").onClick = function() {
var entry = ""
document.getElementById("Televizor").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Controllere").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Timp").onChange = function() {
if (this.selectedIndex !== 0) {
entry += this.value;
}
};
document.getElementById("Table").innerHTML = "<br> " + entry + Date();
var entry = ""
}
<h2>TV-uri</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date & Time.</button>
<p id="demo">Dunno</p>
<div class="container">
<select id="Televizoare">
<option value="0">Televizoare</option>
<option value="1">Tv 1</option>
<option value="2">Tv 2</option>
<option value="3">TV 3</option>
<option value="4">Tv 4</option>
<option value="5">TV 5</option>
<option value="6">Tv 6</option>
<option value="7">TV 7</option>
</select>
<select id="Controller">
<option value="0">Controllere</option>
<option value="1c">1 Controller</option>
<option value="2c">2 Controllere</option>
<option value="3c">3 Controllere</option>
<option value="4c">4 Controllere</option>
</select>
<select id="Timp">
<option value="0">Timp</option>
<option value="1h">1 ora</option>
<option value="1h2">1 ora 30 minute</option>
<option value="2h">2 ore</option>
<option value="2h2">2 ore 30 minute</option>
<option value="3h">3 ore</option>
</select>
<button id="Confirm" onclick="Confrim)">Confirm</button>
</div>
<p id="Table"></p>
Well, you could start off by making sure the spelling and capitalization of your IDs and function names match.
Also, you should create some form of a validation method to check if all the fields are valid before proceeding to the calculation method.
Not sure what you are multiplying, but if you can at least get the valuse from the form fields, that's half the battle.
You should also enclose all your fields within a form object so you can natively interact with the form in a traditional HTML fashion.
// Define the confirm clicke listener for the Confirm button.
function confirm() {
// Grab all the fields and apply them to a map.
var fields = {
'Televizoare' : document.getElementById('Televizoare'),
'Controllere' : document.getElementById('Controllere'),
'Timp' : document.getElementById('Timp')
};
// Determine if the user selected an option for all fields.
var isValid = doValidation(fields);
if (!isValid) {
document.getElementById("Table").innerHTML = 'Please provide all fields!';
return;
}
// Create listeners ???
fields["Televizoare"].onChange = function(e) { };
fields["Controllere"].onChange = function(e) { };
fields["Timp"].onChange = function(e) { };
// Set the value of the paragraph to the selected values.
document.getElementById("Table").innerHTML = Object.keys(fields)
.map(field => fields[field].value)
.join(' — ');
}
// Validation function to check if ALL fields have options selected other than 0.
function doValidation(fields) {
return [].every.call(Object.keys(fields), field => fields[field].selectedIndex !== 0);
}
<h2>TV-uri</h2>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Date & Time.</button>
<p id="demo">Dunno</p>
<div class="container">
<select id="Televizoare">
<option value="0">Televizoare</option>
<option value="1">Tv 1</option>
<option value="2">Tv 2</option>
<option value="3">TV 3</option>
<option value="4">Tv 4</option>
<option value="5">TV 5</option>
<option value="6">Tv 6</option>
<option value="7">TV 7</option>
</select>
<select id="Controllere">
<option value="0">Controllere</option>
<option value="1c">1 Controllere</option>
<option value="2c">2 Controllere</option>
<option value="3c">3 Controllere</option>
<option value="4c">4 Controllere</option>
</select>
<select id="Timp">
<option value="0">Timp</option>
<option value="1h">1 ora</option>
<option value="1h2">1 ora 30 minute</option>
<option value="2h">2 ore</option>
<option value="2h2">2 ore 30 minute</option>
<option value="3h">3 ore</option>
</select>
<button id="Confirm" onclick="confirm()">Confirm</button>
</div>
<p id="Table"></p>
I'm searching and searching and can not find anything exactly what I need.
So I need javascript, that will select option from dropdown, but not by the option value number, but name.
I have:
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
So I need to select • Jawor by name, not by id - it's the most important. How do I make it work?
For you is it like;
var options = document.getElementsByClassName("aa")[0].options,
name ="Jawor";
for(i = 0; i < options.length; i++){
if(options[i].text.indexOf(name) > -1){
options[i].selected = true;
break;
}
}
<select class="aa" id="local" name="local">
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>
U need to Use onChange Event Handler ... for example
<select onchange="showSelected()">
Then write your script ...
<script>
function showSelected(){
var s=document.getElementById('local'); //refers to that select with all options
var selectText=s.options[s.selectedIndex].text // takes the one which the user will select
alert(selectText) //Showing the text selected ...
}
</script>
Rest of your code is okay !
<select class="aa" id="local" name="local" onchange='showSelected'()>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>
Using jquery here. You can use the following function:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
}
})
}
A demo:
function selectFromDropdown(selector, text) {
$(selector).find('option').each(function() {
if ($(this).text() == text) {
$(selector).val($(this).val());
return false;
}
})
}
//use the function
setTimeout(function() {
selectFromDropdown('#local', '• Dzierżoniów')
}, 1000)
setTimeout(function() {
selectFromDropdown('#local', '• Jawor')
}, 4000)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="aa" id="local" name="local">
<option value="">Select</option>
<option value="0">Cała Polska</option>
<option value="1">Dolnośląskie</option>
<option value="100">• Bolesławiec</option>
<option value="101">• Dzierżoniów</option>
<option value="102">• Głogów</option>
<option value="103">• Góra</option>
<option value="104">• Jawor</option>
<option value="105">• Jelenia Góra</option>
</select>
for chrome console use this
document.getElementById("id").selectedIndex = '3'; or
document.getElementById('id').value = 'BA';