We Keep Coding

display current alert when change select value

I have a select (dropdown) and an input. When I enter a number at input, select value change with that number:
<input id="input" type="text" name="selectChanger">
<select id="select">
<option value="" selected></option>
<option value="0">floor 0</option>
<option value="1">floor 1</option>
<option value="2">floor 2</option>
</select>
I want when change select value, display an alert:
document.getElementById('input').addEventListener('input', function (event){
let de = new Event('change');
document.getElementById('select').dispatchEvent(de);
document.getElementById('select').value = document.getElementById('input').value;
})
document.getElementById('select').addEventListener('change', function (event){
alert(document.getElementById('select').text + ' was selected.')
})
Now when input number 0 , display was selected, and then input number 1 display floor 0 was selected but must display floor 1 was selected.
How can I fix this problem?

I think this will help you.
//First Way
document.addEventListener('DOMContentLoaded', event => {
const target_input = document.querySelector('#input'),
target_select = document.querySelector('#select');
if (target_input != null) {
target_input.addEventListener('input', event => {
const { target } = event;
for (const node of [...target_select.childNodes]) {
if (node.nodeType == 1) {
if (node.value == target.value) {
node.selected = true;
alert(`${node.textContent} is selected`)
break;
}
}
}
})
}
});
// Second way
const {input, select} = {input: document.getElementById('input'), select: document.getElementById('select')};
input.addEventListener('input', function (event){
const selector = select.querySelector(`option[value="${input.value}"]`);
if (selector == null) {
alert('Does not exist!');
return '';
}
selector.selected = true;
select.dispatchEvent(new Event('change'));
})
select.addEventListener('change', function (event){
alert(select.value + ' was selected.')
})
<input id="input" type="text" name="selectChanger">
<select id="select">
<option value="" selected></option>
<option value="0">floor 0</option>
<option value="1">floor 1</option>
<option value="2">floor 2</option>
</select>

Now when input number 0 , display was selected, and then input number 1 display floor 0 was selected but must display floor 1 was selected.
Slightly confused, but-
Steps for detecting dropdown value change:
Get the element
Add an event listener for change
Detect the selected value
Code:
elem = document.getElementById("select")
elem.addEventListener("change", function(e) {
alert(elem.options[elem.selectedIndex].innerText + " was selected")
})

calling dropdown functions javascript/jQuery

I have a drop down menu that displays different divs based on the selected option.
<select id='building-type'>
<option disabled selected value> -- select an option -- </option>
<option id="residential" value="residential" [...]>Residential</option>
<option id="commercial" value="commercial " [...]>Commercial</option>
<option id="corporate" value="corporate" [...]>Corporate</option>
<option id="hybrid" value="hybrid" [...]>Hybrid</option>
</select>
In those divs I call my function elevatorCalc() like so.
<div class="col-md-4" id="number-of-apartments">
<label for="residential_apartments">Number of apartments *</label>
<input onchange="elevatorCalc()" required type="number" class="form-control" id="resinput_number-of-apartments">
</div>
The function elevatorCalc() worked with radio buttons but when I switched it to a dropdown it stopped working.
this is my function
function elevatorCalc() {
const floors = document.getElementById("resinput_number-of-floors");
if (document.getElementById("commercial").checked == true) {
commercial();
} else if (document.getElementById("residential").checked == true && parseInt(floors.value) <= 20) {
residential();
} else if (document.getElementById("residential").checked == true && parseInt(floors.value) > 20) {
residential20();
} else if (document.getElementById("corporate").checked == true) {
corpo();
} else if (document.getElementById("hybrid").checked == true) {
hybrid();
}
}
My guess was that the problem came from .checked but I really don't know.

You should get the selected value like this:
let value = document.getElementById('building-type').value;
for the logic:
switch(value) {
case 'residential':
residential();
break;
case 'corporate':
corpo();
...

Change select option based on attribute

I am trying to change a select option on click but I don't want to use the option value. My code works if I give my button a value='3' but what I want is to select the one with data-price="0" which in my case is the one with value='3'.
JS :
jQuery(document).ready(function () {
jQuery('#sample-addtocart-button').click(function(){
jQuery('.product-custom-option').val(jQuery(this).attr('value'));
});
});
Html :
<button value="0" id="sample-addtocart-button" type="button">Free</button>
<select class="product-custom-option">
<option value="">-- Please Select --</option>
<option data-price="10" value="1">£10.00</option>
<option data-price="20" value="2">£20.00</option>
<option data-price="0" value="3">FREE</option>
</select>
Any help will be appreciated

You can use attribute equals selector to get the option and then select option by setting selected property using prop() method.
jQuery(document).ready(function() {
jQuery('#sample-addtocart-button').click(function() {
jQuery('.product-custom-option option[data-price="' + jQuery(this).attr('value') + '"]').prop('selected', true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="0" id="sample-addtocart-button" type="button">Free</button>
<select class="product-custom-option">
<option value="">-- Please Select --</option>
<option data-price="10" value="1">£10.00</option>
<option data-price="20" value="2">£20.00</option>
<option data-price="0" value="3">FREE</option>
</select>

You can select elements by attribute, and then set the selected property on the element.
jQuery(document).ready(function () {
jQuery('#sample-addtocart-button').click(function(){
jQuery('.product-custom-option [data-price=' + this.value + ']').prop("selected", true);
});
});
This selects the element with a data-price attribute equal to the value of this.value, which is a descendant of .product-custom-option, and sets its selected property to true.
Without jQuery, it could look like this:
document.addEventListener("DOMContentLoaded", function () {
document.querySelector('#sample-addtocart-button').addEventListener("click", function(){
document.querySelector('.product-custom-option [data-price=' + this.value + ']').selected = true;
});
});
And a handful of helper methods always helps with the verbosity:
function listen(el, typ, fn, cap) {
el && el.addEventListener(typ, fn, cap)
}
function query(el, sel) {
if (typeof el === "string") {
sel = el;
el = document;
}
return el.querySelector(sel)
}
listen(document, "DOMContentLoaded", function () {
listen(query('#sample-addtocart-button'), "click", function(){
query('.product-custom-option [data-price=' + this.value + ']').selected = true;
});
});

Try this:
jQuery('#sample-addtocart-button').click(function(){
var val= jQuery(this).attr('value');
jQuery('.product-custom-option option[data-price='+val+']').prop('selected', true); // it will find the select option with certain data-price and make it selected
});

How to update a textarea's text relative to a checked radio button?

A textarea's text will be populated with a dropdown lists selected
text.
A simple radio button list will determine which dropdown list's text should be used.
CLICK HERE FOR DEMO
The code below creates the desired effect but does not make the expected changes when an alternate radio button value is selected.
Debugging shows checked is not added to radio inputs when a new selection is made.
JQUERY
var rbl = $('#rbl input:checked').val();
$('#ddlA1,#ddlB1').change(function () {
if (rbl = 1) {
$('#txt').val($('#ddlA1 :selected').text());
} else if (rbl = 2) {
$('#txt').val($('#ddlB1 :selected').text());
}
});
HTML
<span id="rbl">
<input type="radio" id="rbl_0" name="rbl" value="1" /> 1 <br />
<input type="radio" id="rbl_1" name="rbl" value="2" /> 2 <br />
</span>
<select id="ddlA1">
<option value="1">A1 A</option>
<option value="2">A1 B</option>
<option value="3">A1 C</option>
</select>
<select id="ddlB1">
<option value="1">B1 A</option>
<option value="2">B1 B</option>
<option value="3">B1 C</option>
</select>
<textarea id="txt">LOAD TEXT</textarea>

Your code is correct but you need to modify some little things ;)
$('#ddlA1,#ddlB1').change(function () {
var rbl = $('#rbl input:checked').val();
if (rbl == 1) {
$('#txt').val($('#ddlA1 :selected').text());
} else if (rbl == 2) {
$('#txt').val($('#ddlB1 :selected').text());
}
});
Put rbl variable inside the change event
Use == instead of = on your conditionals
http://jsfiddle.net/3kXsX/5/
That's all!
Best Regards,

Something more like this
$('#rbl_0, #rbl_1, #ddlA1, #ddlB1').on('change', function() {
var dropdown = $($('#rbl_0').is(':checked') ? '#ddlA1' : '#ddlB1');
$('#txt').val(dropdown.find('option:selected').text());
});
FIDDLE

The value of rbl is set once, when that line of code runs, and not updated if the selected radio changes. Put the var rbl = ... line inside the event handler so it checks the radios when a change is made to the dropdown, ie
$('#ddlA1,#ddlB1').change(function () {
var rbl = $('#rbl input:checked').val();
if (rbl = 1) {
$('#txt').val($('#ddlA1 :selected').text());
} else if (rbl = 2) {
$('#txt').val($('#ddlB1 :selected').text());
}
});

how to show 2 select options value in another element?

I am have been searched too much on net but nothing found.
I have 2 select options tag.
I want to show option value in the input tag by multiplying option tag value whatever it is.
and selecting 2nd option tag I want to assign 2nd option tag value to 1st option tag value.
and I also want to multiply that values as the 1st options value have before.
how to do this?
here is my code.
My 1st options tag.
<select name="" id="test">
<option selected="" value="0" disabled='disabled'>Select Duration</option>
<option value="1">1/month</option>
<option value="2">2/month</option>
<option value="3">3/month</option>
<option value="6">6/month</option>
<option value="12">12/month</option>
</select>
<input type="text" data-val="9" id="price_value" style="border:1px solid #0a0; padding:1px 10px; color: #f90;" value="0" size="5"/><br>
Here is 2nd option tag.
<select id="plan">
<option value='Basic'>Basic</option>
<option value='Standard'>Standard</option>
<option value='Professional'>Professional</option>
<option value='Enterprice'>Enterprise</option>
</select>
here is JS.
$('#test').on('change',function(e){
var input = $(this).next('input[type="text"]');
var value = $(this).find('option:selected').val();
input.val( input.data('val') * parseInt(value) );
});
$('#plan').on('change',function(e) {
var plan = $(this).find('option:selected').val();
var price_value = $('#price_value');
if (plan == "Basic") {
price_value.removeAttr('data-val');
price_value.attr('data-val','9');
}
else if (plan == "Standard"){
price_value.removeAttr('data-val');
price_value.attr('data-val','19');
}
else if (plan == "Professional"){
price_value.removeAttr('data-val');
price_value.attr('data-val','29');
}
else if (plan == "Enterprice") {
price_value.removeAttr('data-val');
price_value.attr('data-val','59');
}
});
Here is Demo

Changes
Use $(this).val() instead of $(this).find('option:selected').val() to fetch select value. or even better use this.value
use .data() to set value like price_value.data('val', 9); instead of price_value.attr('data-val','9');
No need to use price_value.removeAttr('data-val');
Code
$('#test').on('change',function(e){
var input = $(this).next('input[type="text"]');
var value = $(this).val(); //Or this.value
input.val( input.data('val') * parseInt(value, 10) );
});
$('#plan').on('change',function(e) {
var plan = $(this).val();
var price_value = $('#price_value');
if (plan == "Basic") {
price_value.data('val',9);
}
else if (plan == "Standard"){
price_value.data('val',19);
}
else if (plan == "Professional"){
price_value.data('val',29);2
}
else if (plan == "Enterprice") {
price_value.data('val',59);
}
$('#test').trigger('change'); //Trigger $('#test') change event
});
DEMO

This solution would work if you are okay with changing your HTML a bit:
<select id="plan">
<option value='9'>Basic</option>
<option value='19'>Standard</option>
<option value='29'>Professional</option>
<option value='59'>Enterprise</option>
</select>
Then simply use:
$('#test, #plan').on('change',function() {
var valueOne = $('#test').val();
var valueTwo = $('#plan').val();
$('#price_value').val(parseInt(valueOne) * parseInt(valueTwo));
});
That's all!