JavaScript - output values from two different dropdown menus - javascript

I'm still new to Java Script, I'm trying to create a very simple tool, but I have some questions I can't seem to figure out how. Hope any of you can give me some ideas or examples here.
I have two drop down menus and I want to output the selected values and displayed them in a readable way. How can I use document.getElementId and onchange to write a function?
Any help would be greatly appreciated
Example,
Moving from (value from list_1) to (value from list_2)
<script type="text/javascript">
</script>
<div class="moving_1">
<span>* Moving from:</span><br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p>Moving from (value from list_1) to (value from list_2)</p>

Hope it helps. If you have any questions, just ask in comments.
// We find element by id "list_1" then we add an event listener "change"
document.getElementById("list_1").addEventListener("change", function(e) {
// Now we find element by id "moving_1_result" and set its innerHTML to targets value aka list_2's value
document.getElementById("moving_1_result").innerHTML = e.target.value;
});
document.getElementById("list_2").addEventListener("change", function(e) {
document.getElementById("moving_2_result").innerHTML = e.target.value;
});
<div class="moving_1">
<span>* Moving from: <span id="moving_1_result"></span></span>
<br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to: <span id="moving_2_result"></span></span>
<br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>

it relatively easy, try the following
//onchange handler
function changed(listId){
var list = document.getElementById(listId);
document.getElementById("val_"+listId).innerHTML = list.value;
}
//initialization
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value;
document.getElementById("val_list_2").innerHTML = document.getElementById("list_2").value;
<div class="moving_1">
<span>* Moving from:</span><br/>
<select onchange="changed('list_1')" name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select onchange="changed('list_2')" name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p>Moving from <span id="val_list_1"></span> to <span id="val_list_2"></span></p>

Let's stay with your original code. You would need to add an eventListener to your dropdown menus and then overwrite the innerHTML of your paragraph.
You can identify your elements either by their class name or by their tag name.
It is preferable to have IDs and not just class names to make the identification process easier.
document.getElementsByClassName("moving_1")[0].addEventListener("change", update_text);
document.getElementsByClassName("moving_2")[0].addEventListener("change", update_text);
function update_text() {
document.getElementById("moving_text").innerHTML = "Moving from " + document.getElementsByClassName("moving_1")[0].getElementsByTagName('select')[0].value + " to " + document.getElementsByClassName("moving_2")[0].getElementsByTagName('select')[0].value;
}
<div class="moving_1">
<span>* Moving from:</span><br/>
<select name="list_1" id="list_1">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<div class="moving_2">
<span>* Moving to:</span><br/>
<select name="list_2" id="list_2">
<option value="CA">CA</option>
<option value="DC">DC</option>
<option value="PA">PA</option>
<option value="NY">NY</option>
</select>
</div>
<p id="moving_text">Moving from (value from list_1) to (value from list_2)</p>

Related

click function execute multiple times on elements which has same class name

I used bootstrap multiselect js plugin, after i used in my code, I need to add one click event for each options i select so i bind the click event for that What happened is when i try to click the select option the function execute 2 times. (It supposed to execute only 1 time)
I want to know whats happening in my code, Can anyone explain me ?
My code HTML:
<div class="select-box">
<select id="demo1" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo2" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo3" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
My code JS:
$(document).ready(function() {
$('.course-list').multiselect();
$('.select-box').each(function(){
$(this).find('.ms-options ul li').each(function(index){
$(this).attr('data-item-index',index);
$(this).attr('onclick','selectToggleItem(this)');
// $(this).bind('click', selectToggleItem);
});
});
});
function selectToggleItem(e){
console.log('test');
}
If i click the list item it call the function (selectToggleItem) 2 times Why ???
i used bootstrap-multiselect.js and css file for this.
You meet this problem when you click on the label because the event is triggered by both input and label tags. If you click on the checkbox, the selectToggleItem is triggered only once.
To prevent that behaviour, you can bind the event to the checkbox instead of the <li> tag.
$(document).ready(function() {
$('.course-list').multiselect();
$('.select-box').each(function(){
$(this).find('.multiselect-container li').each(function(index){
$(this).attr('data-item-index',index);
$(this).find("input[type=checkbox]").bind('click', selectToggleItem);
});
});
});
function selectToggleItem(e){
console.log('test');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<div class="select-box">
<select id="demo1" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo2" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo3" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>

Change the selected option of multiple dropdowns with a single trigger

I have multiple dropdowns in separate sections which represent different views of the same dataset similar to below. I want to change all of the dropdowns with any of the selections, but I can't find a working solution.
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
Making any selection should change all of the others, but it needs to be a dynamic solution, I might have a high number of selects on a page!
I can't get much further than a class based change function, followed by a class based each function, I'm sure the answer is there but I've only found answers to similar questions which rely on a single "master" dropdown to trigger the events of the others.
Many thanks
Solution
I've made a rookie mistake, most of the answers I already found that I thought should work, do work. I'm using a funny new framework on my front end, and it needs an additional event to fire to make the dropdown look like it was selected. The behavior of the dropdown was working exactly as expected all along.
How to avoid this rookie mistake
I should fiddle my own work if I expect something is not working as it should (and before posting). I would have realized my error much faster.
Thank you for your help!
Simply you can get value and set it as below
$(document).on('change', '.select', function(e){
var val = $(this).val();
$(".select").val(val);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
$(function(){
$('.select').change(function(){
$('.select').val($(this).val());
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
Use selectedIndex when dropown change like below. It's works even the class is different.
$('select').change(function() {
$('select').prop('selectedIndex', $(this)[0].selectedIndex);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
A vanilla javascript solution if you prefer it.
var selects = document.getElementsByClassName('select');
Array.prototype.forEach.call(selects, function(elem) {
elem.addEventListener('change', function() {
Array.prototype.forEach.call(selects, function(elem) {
elem.value = this.value;
}.bind(this));
});
});
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>
<select class="select">
<option value="0" selected>Select an option</option>
<option value="1">Foo</option>
<option value="2">Bar</option>
</select>

dynamic drop down menu for labels

I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.
in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here

Get the text from a select option

I'm looking to change an input field where a user write down a word. The word is then took to the javascript by using document.getElementById("myInput1").value;
So basically, in html it's this:
<input type="text" id="myInput1" placeholder="" style="z-index:1"></input>
<span onclick="newElement1()" class="addBtn" style="border-radius: 0px; height:30px">Add</span>
But know what i want is a select field, so the user won't be able to type something wrong or something that doesn't exist in a list:
<select>
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
So without changing many things, I want to replace just in the html the input text by a selecting field. Then what the user will choose, it will have the id "myInput1" (and of course javascript knows what to do with this).
You just need to ask for the value of the select instead of the input field.
By the way setting border-radius:0 is the same thing as not setting it at all and you can't set height on a span (unless you change the span to display:block or display:inline-block) because span elements are inline elements and their height is determined by their content.
// If an element has an id, then .getElementById() is the most direct way
// to access it.
let make = document.getElementById("carMake");
// If an element doesn't have an id, .querySelector() is very easy to use
// to get a reference to the element. Here, the selector is for the .addBtn class
document.querySelector(".addBtn").addEventListener("click", function(){
// Get the text of the selected <option>
console.log("You selected: ", carMake.options[carMake.selectedIndex].textContent);
// Get the value of the selected <option>
console.log("You selection has a value of: ", carMake.value);
});
<span class="addBtn">Add</span>
<select id="carMake">
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
Try this:
<span class="addBtn" onclick="newElement1()">Add</span>
<select id="carMake">
<option value="0">Select car:</option>
<option value="1">Audi</option>
<option value="2">BMW</option>
<option value="3">Citroen</option>
<option value="4">Ford</option>
<option value="5">Honda</option>
<option value="6">Jaguar</option>
<option value="7">Land Rover</option>
<option value="8">Mercedes</option>
<option value="9">Mini</option>
<option value="10">Nissan</option>
<option value="11">Toyota</option>
<option value="12">Volvo</option>
</select>
<script>
function newElement1() {
var e= document.getElementById("carMake");
var value = e.options[e.selectedIndex].value;
$('#myInput1').val(value); }
</script>

populating state dropdown from country selection in asp

i have an old classic asp application that need to update. i need to add 2 dropdowns and the second one needs to be populated based on the first (ex. country and states). how do you do that using javascript?
UPDATE: Based on your comment below, I've updated my response to include code that will do what you're wanting. You can use the optgroup element to filter options based on what country is selected without having to use Ajax.
First way: (optgroup filtering)
Working example on jsFiddle.
HTML:
<select id="C_Country" name="C_Country" aria-required="true" class="required">
<option value="">-- Please Select --</option>
<option value="USA">United States</option>
<option value="CA">Canada</option>
</select>
<p>
<label for="C_State_Prov">State or Province <span title="required">*</span>
</label>
</p>
<select id="C_State_Prov" name="C_State_Prov" aria-required="true" class="required">
<option value="" selected="">-- Please Select --</option>
<optgroup label="United States">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
</optgroup>
<optgroup label="Canada">
<option value="AB">Alberta</option>
<option value="BC">British Columbia</option>
<option value="MB">Manitoba</option>
</optgroup>
</select>
JavaScript:
var state_province = $('#C_State_Prov option, #C_State_Prov optgroup');
state_province.hide();
$('#C_Country').change(function () {
state_province.hide();
$("#C_State_Prov optgroup[label='" + $(this).find(':selected').html() + "']")
.children()
.andSelf()
.show();
});
Second way: (Ajax)
Working example on jsFiddle.
Here's a rough idea of how to accomplish this. The URL defined in the jQuery should point to a location where the server-side code will generate the HTML needed based on the country the user selected (instead of being defined as a variable in the JavaScript).
HTML:
<form action="#">
<div>
<label for="country">Country:</label>
</div>
<div>
<select name="country" id="country">
<option value="">Please select</option>
<option value="us">United States</option>
</select>
</div>
<div id="stateContainer" class="hidden">
<div>
<label for="state">State</label>
</div>
<div>
<select id="state" name="state"></select>
</div>
</div>
<div>
<input type="submit" id="submit" name="submit" value="Submit">
</div>
</form>
CSS:
.hidden {
display: none;
}
JavaScript:
var $country = $("#country"),
$stateContainer = $("#stateContainer"),
$state = $("#state"),
url = "http://jsfiddle.net/htmled/KZ4jd/",
html = '<option value="al">Alabama</option><option value="ar">Arkansas</option>',
countryVal;
$country.change(function () {
countryVal = $country.val();
$stateContainer.show();
$state.html(html).load(loadUrl);
});

Categories