querySelectorAll to get selected values of dropdowns - javascript

I want to use querySelectorAll to get the selected values for multiple dropdowns on my page, then print them elsewhere on the page.
I'm struggling to find the right way to do this because they all have different names ('dropDown[0]' and 'dropDown[1]' ect). I can't change the naming convention, so i need to find a way of selecting all dropdowns that have 'dropDown' in the name, then print the values separated by a comma.
This is what i've tried so far:
const dropDowns = document.querySelectorAll('select[name="dropDown"]')
if (!dropDowns) return
this.dropDown = dropDowns.options[dropDowns.selectedIndex].text
this.dropDown.join(', ')
<div class="form-group">
<label for="dropDown1">Dropdown 1:</label>
<select name="dropDown[0]" id="dropDown1" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<div class="form-group">
<label for="dropDown2">Dropdown 2:</label>
<select name="dropDown[1]" id="dropDown2" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>

Use the ^= starts with selector and then map:
var res = [...document.querySelectorAll('select[name^="dropDown"]')].map(sel => sel.value)
Like this
const show = () => {
const res = [...document.querySelectorAll('select[name^="dropDown"]')].map(sel => sel.value);
document.getElementById("res").innerText = res.join(", ")
};
window.addEventListener("load", () => {
document.getElementById("container").addEventListener("change", e => {
const tgt = e.target;
if (tgt.classList.contains("form-control") && tgt.id.startsWith("dropDown")) { show ()}
});
show(); // init
})
<div id="container">
<div class="form-group">
<label for="dropDown1">Dropdown 1:</label>
<select name="dropDown[0]" id="dropDown1" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<div class="form-group">
<label for="dropDown2">Dropdown 2:</label>
<select name="dropDown[1]" id="dropDown2" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
</div>
<span id="res"></span>
Older less elegant answer:
const onchange = () => {
var res = [];
[...document.querySelectorAll('select[name^="dropDown"]')].forEach(sel => res.push(sel.value) );
document.getElementById("res").innerText = res.join(", ")
}
[...document.querySelectorAll('select[name^="dropDown"]')].forEach(sel => sel.addEventListener("change",onchange));
onchange()
<div class="form-group">
<label for="dropDown1">Dropdown 1:</label>
<select name="dropDown[0]" id="dropDown1" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<div class="form-group">
<label for="dropDown2">Dropdown 2:</label>
<select name="dropDown[1]" id="dropDown2" class="form-control">
<option value="D20">Option 1</option>
<option value="T20">Option 2</option>
<option value="T11">Option 3</option>
<option value="S10">Option 4</option>
</select>
</div>
<span id="res"></span>

You can't use a regular expression in a selector but CSS selectors are powerful enough for your need with a "starts with" syntax inspired by regexes.
You can use a substring matching attribute selectors : select[name^=dropDown]
Reads "Nodes of type select with an attribute name starting with "dropDown"
From the formal specification:
[att^=val]
Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.

document.querySelectorAll('[name^="dropDown"]').forEach(function(node) {console.log(node.options[node.selectedIndex].value);});

You also can do something like this as you want to select the option's values:
var Container = document.querySelector('#output');
var Dropdowns = document.querySelectorAll('select');
// Select All Options Values:
for ( var dropdown in Dropdowns ) {
for ( var i = 0; i < Dropdowns[dropdown].children.length; i++ ) {
var elem = document.createElement('p');
elem.innerHTML = Dropdowns[dropdown].children[i].value;
Container.appendChild(elem);
}
}
<select>
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
<option value="3">Number 3</option>
<option value="4">Number 4</option>
</select>
<select>
<option value="5">Number 5</option>
<option value="6">Number 6</option>
<option value="7">Number 7</option>
<option value="8">Number 8</option>
<option value="9">Number 9</option>
</select>
<div id="output"></div>
Just an example for doing this.

Related

How to select from dropdown and reflect on the url like this sample.com/past_questions/chemistry/?exam_div=gce&exam_year=2018

<div class="row" style="margin-bottom:40px">
<div class="col-xs-12 col-sm-6">
<p><strong><label> Examination Division</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:16px;">
<option value selected>Select exam division </option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=jamb">JAMB</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=gce"> GCE</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_div=alevel">A LEVEL</option>
</select>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<p><strong><label>Examination Year</strong></label>
</p>
<div>
<select type="text" name="exam_div" onchange="location = this.options[this.selectedIndex].value;" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>
</div>
combine the two drop downdowns into a single url that includes both the division and year
Keep it simple:
put only the div/year values on the option value, not the whole url
add the base url to a findable location with data-
add events with jquery, not onclick=
use .on("change"... on both the selects and check that both values have been entered
combine all 3 (url+2x values) into a url and redirect (commented out below)
$(".selection select").on("change", function() {
var division = $("#exam_div").val();
var year = $("#exam_year").val();
if (division === "" || year === "")
return;
var url = $(".selection").data("url") + "?exam_div=" + division + "&exam_year=" + year;
//location.href = url;
console.log(url);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='selection' data-url='https://sample.com/past-questions/chemistry'>
<div>
<p><strong>Examination Division</strong></p>
<div>
<select name="exam_div" id="exam_div">
<option value selected>Select exam division </option>
<option value="jamb">JAMB</option>
<option value="gce"> GCE</option>
<option value="alevel">A LEVEL</option>
</select>
</div>
</div>
<div>
<p><strong>Examination Year</strong>
</p>
<div>
<select name="exam_year" id="exam_year">
<option value selected>Select an exam year</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
</select>
</div>
</div>
</div>
from a UX perspective, this would be better with the click of a "GO" button rather than select on change and the change event fires when changing select options with the keyboard.
<select type="text" name="exam_div" id="examdiv" class="form-control" style="margin-bottom:15px;padding:0px 10px;font-size:15.5px;">
<option value selected>Select an exam year</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2018">2018</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2017">2017</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2016">2016</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2015">2015</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2014">2014</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2013">2013</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2012">2012</option>
<option value="https://sample.com/past-questions/chemistry/?&exam_year=2011">2011</option>
</select>
use jquery try this
$(document).on('click', '#examdiv', function(){
window.location.replace($('this').val());
});

Require Select Not Allow First Option

Say we have the following:
<select name="select" required>
<option disabled selected value>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" name="submit">Submit</button>
I would like this field to be required but I do not want to allow the user to submit the first option (<option disabled selected value>Please Select Option</option>)
By default, the first option (<option disabled selected value>Please Select Option</option>) should be selected until the user changes the option.
I've tried doing Googling this problem but I'm only able to find different problems but not this particular one. My thoughts is that it would have to use Javascript to accomplish this but I would like to use an HTML option before going that route.
Thank you for help!
<select>
<option selected="true" style="display:none;">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
Using JS
$("#clickButton").click(function (event) {
var picked = $('#selector option:selected').val();
if (picked == 0) {
alert("Please select any value");
} else {
console.log("Selected")
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector" name="select" required>
<option disabled selected value="0">Select</option>
<option>Data 1</option>
<option>Data 2</option>
<option>Data 3</option>
</select>
<button id="clickButton" type="submit" name="submit">Submit</button>
Much more complicated than the awesome witchcraft #Mr. HK showed, but another approach:
HTML:
<select id="selector" name="select" required>
<option disabled selected value="0">Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button id="mainButton" type="submit" name="submit">Submit</button>
JS:
$("#mainButton").click(function(event) {
var picked = $('#selector option:selected').val();
if (picked == 0){
alert("you must pick an option")
}
else{
//do whatever
}
})
See here: http://jsfiddle.net/ShL4T/105/
if you do not mind using php or javascript to validate the input of the select. tag.
here is a simple javascript verification:
function verify(){
var somevar = document.getElementById("select").value;
if(somevar == 'Please Select Option'){
document.getElementById("message").innerHTML = 'Invalid Choice, Please choose Option 1, 2, or 3';
}else{
//do whatever you want to do
}
}
<p id="message"></p>
<select name="select" id="select" required>
<option disabled selected>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" onclick="verify()" name="submit">Submit</button>
<form>
<select name="select" required>
<option disabled selected value>Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button type="submit" name="submit">Submit</button>
</form>
<select id="option" name="select" required>
<option disabled selected value="0">Please Select Option</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

How to show a div when an option is selected [duplicate]

I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/
No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!

How to change two select> option dropdown in the same time [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want that when I select an option from one dropdown,at the same time other dropdown value should change according to the first one.
For example: if I choose 'Value 1' from 'dropdown 1' , then in 'dropdown 2'
it should change automatically to the same value('Value 1').
Can anyone help-me please? I thank you in advance!
Here is my Demo.
DEMO
<select name="" id="">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
<select name="" id="">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
First give identities to the selects
<select name="" id="one">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="" id="two">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
Then
jQuery(function ($) {
var $set = $('#one, #two')
$set.change(function () {
$set.not(this).val(this.value)
})
})
Demo: Fiddle
with pure javascript
<select name="test1" id="test1">
<option value="0">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="test2" id="test2">
<option value="0">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<script>
document.getElementById('test1').addEventListener("change", function () {
document.getElementById('test2').selectedIndex = document.getElementById('test1').selectedIndex;
}, false);
</script>
Fiddle here..
fiddle Demo
$(function () {
var select = $('select.select');
select.change(function () {
select.not(this).val(this.value);
});
});
HTML
added class select and value to options
<select name="" id="" class="select">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
<select name="" id="" class="select">
<option value="">Select</option>
<option value="1">Value 1</option>
<option value="2">Value 2</option>
</select>
Demo: Fiddle
HTML:
<select name="" id="one">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
<select name="" id="two">
<option value="">Select</option>
<option value="">Value 1</option>
<option value="">Value 2</option>
</select>
jQuery:
$('#one').on('change', function(){
$("#two option").each(function(){
if ($(this).text() == $('#one option:selected').text()) {
$(this).attr('selected',true);
}
});
});
Try this:
$(function(){
$('#s1')[0].selectedIndex = 0;
$('#s1').change(function(){
var index = $(this)[0].selectedIndex;
$('#s2')[0].selectedIndex = index;
});
});
Here's DEMO
You could bind change event for each select. See the demo here:DEMO
$("#select-1").on("change",function(){
$("#select-2").val($(this).val());
})
$("#select-2").on("change",function(){
$("#select-1").val($(this).val());
})

Dropdown form with submit button

I have a dropdown with links in them, when I select the option it will go to the page, but I want to use a button instead but not sure how to change the javascript to make this happen:
<select name="form" onchange="location = this.options[this.selectedIndex].value;"class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
Instead of putting location = this.options[this.selectedIndex].value in unChange, move it to a button onClick event:
<select id="dropdown" name="form" class="form-control">
<option>Choose a Service</option>
<option value="http://www.google.com">Option-1</option>
<option value="http://www.google.com">Option-2</option>
<option value="http://www.google.com">Option-3</option>
<option value="http://www.google.com">Option-4</option>
<option value="http://www.google.com">Option-5</option>
</select>
<input type="button" value="Go!" onClick='location = document.getElementById("dropdown").options[document.getElementById("dropdown").selectedIndex].value'>
<select id="dd" name="form">
<option>Choose a Service</option>
<option value="http://www.google.com">Option 1</option>
<option value="http://www.google.com">Option 2</option>
<option value="http://www.google.com">Option 3</option>
<option value="http://www.google.com">Option 4</option>
<option value="http://www.google.com">Option 5</option>
</select>
<button onClick="launchPage" >
<script>
var launchPage = function() {
var e = document.getElementById("dd");
var url = e.options[e.selectedIndex].value;
window.open(url);
};
</script>

Categories

Resources