We Keep Coding

Alert message for different dropdown choices

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");
}
}

show hide div based on select option value jQuery

I have a select list with value 0,1,2,3,4,5,6,7 .On select with value 0 and 1 I want to show a div, but on select with value 2,3,4,5,6,7 I want to hide that div.The code I have right now is below
HTML
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>
jQuery
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() == '2','3','4','5','6','7') {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
The code actually works when I put
.val() == '2')
instead of
.val() == '2','3','4','5','6','7')
But then I cant show the div for other values

You can do it like this if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
Demo
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function() {
$('.rel_status').change(function() {
if ($.inArray($(this).val(), "2,3,4,5,6,7") == -1) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

use this it will works
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
//hide partner search form
$('.rel_part').hide();
//Search Relationship partner
$(document).ready(function(){
$('.rel_status').change(function(){
if($('.rel_status').val() < 2) {
$('.rel_part').show();
} else {
$('.rel_part').hide();
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<select class="rel_status">
<option value="0">---</option>
<option value="1">Single</option>
<option value="2">In a relationship</option>
<option value="3">Engaged</option>
<option value="4">Married</option>
<option value="5">Separated</option>
<option value="6">Divorced</option>
<option value="7">Widowed</option>
</select>
<div class="rel_part">
<input type="text" name="part_name" placeholder="Search">
</div>

That's not a valid way of comparing one value to many others.
if($('.rel_status').val() == '2','3','4','5','6','7')
Use a logic OR Operator instead:
if($('.rel_status').val() == '0' || $('.rel_status').val() = '1') {
$('.rel_part').hide();
} else {
$('.rel_part').show();
}
Notice, that I switched the cases in the if clause so it's less code to write.

The problem is this is not a valid way to use , in Javascript, because you will end up validating if($('.rel_status').val() == '7') { instead.
You can change the code into this
if($.inArray($('.rel_status').val(), ['2','3','4','5','6','7']) != -1) {
and it should work.
Hope it helps!

HTML select option VALUE calculate

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>

Verify values of selctbox using jquery

i'm new to this. I'm using in a html page with 2 selctboxs, one for min price and the other for max price and a hidden input to put on it the combination of the two values of the selectboxs.
<div class="option-bar mini first">
<label><?=__("Min Price")?></label>
<span class="selectwrap">
<select name="min-price" id="pmin" class="search-select">
<option value=""></option>
<option value="1000">$1000</option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
</select>
</span>
</div>
<div class="option-bar mini">
<label><?=__("Max Price")?></label>
<span class="selectwrap">
<select name="max-price" id="pmax" class="search-select">
<option></option>
<option value="2000">$2000</option>
<option value="3000">$3000</option>
<option value="4000">$4000</option>
<option value="5000">$5000</option>
<option value="6000">$6000</option>
<option value="7000">$7000</option>
<option value="8000">$8000</option>
<option value="9000">$9000</option>
<option value="10000">$10,000</option>
</select>
</span>
</div>
<input type="hidden" id="prix" name="prix" class="sel2" value="" />
and i got this jquery code :
$("#pmin, #pmax").change(function(){
update();
});
function update() {
$("#prix").val($('#pmin').val() + "-" + $('#pmax').val());
}
So what i want to do is when the user select options in the two selectbox, verify if the min price value is lower than the max price value and if not show a message.
Thnx a lot guys.

$("#pmin, #pmax").change(function() {
if ($("#pmin").val() && $("#pmax").val()) { //check if both have values
if (parseFloat($("#pmin").val()) > parseFloat($("#pmax").val())) { //check if valid range
alert('invalid range')
return;
}
}
update();
});

$(".search-select").change(fucntion(){
var max_val = $("#pmax").val();
var min_val = $("#pmin").val();
if(max_val != '' && min_val != '' && max_val < min_val){
alert("Max value is less than Min value.");
}
});
Try this..!!

You should modify the change and update method as shown below:
$("#pmin, #pmax").change(function() {
if ($('#pmin').val() != "" && $('#pmax').val() != "") {
update();
}
});
function update() {
var computedValue = parseInt($('#pmin').val()) - parseInt($('#pmax').val());
if (computedValue < 0) {
alert('Invalid selection.');
}
$("#prix").val(computedValue);
}
Refer the demo.

HTML multi select how to deselect all if select first item using jquery

I have a multi select control look like below,
When user select "Any", I want to deselect all other selected values and select only "Any", means, if user select "Any", do not allow to select other values else allow to select other values.
How its possible through jQuery
Thanks...

jQuery("#select").change(function() {
if (jQuery("#select option:first").is(':selected')) {
jQuery("#select").val("any");
}
});
To the form below:
<select multiple id="select">
<option value="any">Any</option>
<option value="...">...</option>
...
</select>

I think you want something like this:
$("select").on("change", function () {
var selOption = $("option:selected", this).val();
if (selOption == "any") {
$(this).attr("selected", false);
$(this).val("any");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select2" multiple="multiple">
<option value="any">Any</option>
<option value="12">twelve</option>
<option value="13">thirette</option>
<option value="14">fourteen</option>
<option value="15">fifteen</option>
<option value="16">sixteen</option>
<option value="17">seventeen</option>
<option value="18">eighteen</option>
<option value="19">nineteen</option>
<option value="20">twenty</option>
</select>

In most cases this should work
$('.my-select').val('any')
Where is ’any' is a value of Any option.
(function() {
var mSelect;
mSelect = $('select');
mSelect.on('click', function(event) {
var values, needReset;
values = mSelect.val();
needReset = event.target.value === 'any' ||
(values.length > 1 && values.indexOf('any') !== -1);
if (needReset) {
mSelect.val('any');
}
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option value="any">Any</option>
<option value="divorced">Maried</option>
<option value="unmarried">Unmarried</option>
</select>