Dynamically update a dropdown list based on another dropdown list? - javascript

I have a dropdown list with id='apha' with three options and their values are comma separated.
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
Another dropdown beta with values. Based on which option is selected in alpha those values should be there in second dropdown beta.
<select class="browser-default" id="beta">
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>
So if One is selected from alpha dropdown. Only values of aplha - a,b,c should be present in beta dropdown - First Second Third
What i have tried:
Without comma separated in values
$('#alpha').on('change', function () {
$('#alpha').html('');
if ($('#alpha').val() == "One") {
$('#alpha').append('<option value="a">First</option>');
$('#alpha').append('<option value="b">Second</option>');
$('#alpha').append('<option value="c">Third</option>');
}
});

You can use split(',') to split values then using for-loop you can get values from split array and finally use $("#beta option[value=" + vals + "]").show() to show options where values matches.
Demo Code:
$("#alpha").on("change", function() {
var values = $(this).val().split(',') //split value which is selected
$("#beta option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#beta option[value=" + vals + "]").show()//show that option
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
<select class="browser-default" id="beta">
<option selected="selected" value="">--select one-- </option>
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>

Vanilla JS
const beta = document.getElementById('beta');
const betaOpts = [...beta.children];
document.getElementById('alpha').addEventListener(
'change',
(e) => {
beta.innerHTML = betaOpts.filter(
o => e.target.value.includes(o.value)
).map(o => o.outerHTML).join('')
})
<label>Alpha</label>
<select class="browser-default" id="alpha">
<option value="a,b,c">One</option>
<option value="d">Two</option>
<option value="e,f">Three</option>
</select>
<label>Beta</label>
<select class="browser-default" id="beta">
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
<option value="d">Fourth</option>
<option value="e">Fifth</option>
<option value="f">Sixth</option>
</select>

Related

Filter multiple data attributes in dropdown list

I have a dropdown list with multiple data attributes
<select class="op" id="b0">
<option
value="1"
data-type="vehicle"
data-vtype="car"
data-model="bmw"
data-engine="1"
data-owner="1"
data-year="2009"
>BMW2009 </option>
<option
value="2"
data-type="vehicle"
data-vtype="bus"
data-model="jeep"
data-engine="2"
data-owner="4"
data-year="2006"
>BMW2009 </option>
<option
value="3"
data-type="boat"
data-vtype="boat1"
data-model="boat2"
data-engine="0"
data-owner="3"
data-year="2010"
>BMW2009 </option>
There will be around 10k of the data, so I have dropdowns to filter the data
<select id="typeFilter">
<option value="vehicle">Vehicle </option>
<option value="Aeroplane">Aeroplane </option>
<option value="Boat">Boat </option>
</select>
<select id="modelFilter">
<option value="BMW">BMW </option>
<option value="Jeep">Jeep </option>
<option value="Boat2">Boat2 </option>
</select>
I want to filter by typeFilter and/or modelFilter. I used the following code
$('#modelFilter').on('change', function() {
let mtype = $(this).find("option:selected").data("model");
$("#b0").show();
$("#b0 option[data-model]:not([data-model*='" + mtype + "'])").hide();
});
$('#typeFilter').on('change', function() {
let ttype = $(this).find("option:selected").data("type");
$("#b0").show();
$("#b0 option[data-type]:not([data-type*='" + ttype + "'])").hide();
});
The method partially works, so when I select BMW, I can see only the option 3 list but for the multiple conditions with the same name it doesn't. Is there a simpler way to filter the multiple data attributes?
first you define a function,
function filter(){
//show all data
$("#b0 option").show();
//check filter by model
let mtype = $('#modelFilter').find("option:selected").data("model");
if(mtype){
$("#b0 option[data-model]:not([data-model*='" + mtype + "'])").hide();
}
//check filter by typeFilter
let ttype = $('#typeFilter').find("option:selected").data("type");
if(ttype){
$("#b0 option[data-type]:not([data-type*='" + ttype + "'])").hide();
}
}
then in each filter call this function,
$('#modelFilter,#typeFilter').on('change', function () {
filter()
})
First, the value of your filter select element is not matched with your dropdown because it is case-sensitive.
Second, you can use one single function to do your filtering.
Note: I add a option <option selected disabled>---select a option----</option> to force the user to trigger a change event.
$("#modelFilter").on("change", filter);
$("#typeFilter").on("change", filter);
function filter() {
$("#b0 option").show();
const typeFilterValue = $("#typeFilter").val();
const modelFilterValue = $("#modelFilter").val();
if(typeFilterValue!==null){
$(`#b0 option:not([data-type='${typeFilterValue}'])`).hide();
}
if(modelFilterValue!==null){
$(`#b0 option:not([data-model='${modelFilterValue}'])`).hide();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="op" id="b0">
<option selected disabled>---select a option----</option>
<option
value="1"
data-type="vehicle"
data-vtype="car"
data-model="bmw"
data-engine="1"
data-owner="1"
data-year="2009"
>
BMW2009
</option>
<option
value="2"
data-type="vehicle"
data-vtype="bus"
data-model="jeep"
data-engine="2"
data-owner="4"
data-year="2006"
>
Jeep
</option>
<option
value="3"
data-type="boat"
data-vtype="boat1"
data-model="boat2"
data-engine="0"
data-owner="3"
data-year="2010"
>
Boat
</option>
</select>
<select id="typeFilter">
<option selected disabled>---select a option----</option>
<option value="vehicle">Vehicle</option>
<option value="Aeroplane">Aeroplane</option>
<option value="Boat">Boat</option>
</select>
<select id="modelFilter">
<option selected disabled>---select a option----</option>
<option value="bmw">BMW</option>
<option value="jeep">Jeep</option>
<option value="boat2">Boat2</option>
</select>

get a few selected option javascript [duplicate]

This question already has answers here:
get multiple values from dropdownlist in JavaScript
(3 answers)
Closed 3 years ago.
How do I get the selected value from a dropdown list in case there are more than one selected item using JavaScript? For example:
<select name"nana" id="nana">
<option value="0"</option>
<option value="1"</option>
<option selected="selected" value="2"</option>
<option value="3"</option>
<option selected="selected" value="4"</option>
</select>
I tried:
var e = document.getElementById("nana");
var strUser = e.options[e.selectedIndex].value;
and
document.querySelector("nana").value;
but it returns only the first selected value (2). How can I get all of the selected values?
add multiple="multiple" for multiple for more than 1 select
var selectNana = document.getElementById("nana");
var selectedNana = [];
for (var i = 0; i < selectNana.length; i++) {
if (selectNana.options[i].selected) selectedNana.push(selectNana.options[i].value);
}
console.log(selectedNana);
<select name"nana" id="nana" multiple="multiple" >
<option value="0">0</option>
<option value="1">1</option>
<option selected="selected" value="2">2</option>
<option value="3">3</option>
<option selected="selected" value="4">4</option>
</select>
First make sure your HTML syntax is correct - open tags, like <option, need closing >s too.
Use the query string #nana > option[selected] to select children with the selected attribute, then map to their values:
const selectedValues = Array.from(
document.querySelectorAll('#nana > option[selected]'),
option => option.value
);
console.log(selectedValues);
<select name="nana" id="nana">
<option value="0"></option>
<option value="1"></option>
<option selected="selected" value="2"></option>
<option value="3"></option>
<option selected="selected" value="4"></option>
</select>

Car Make/Model dynamic dropdown

I'm setting up a new form on my site, and I'm using some code I found here (Vehicle drop down selector). However, I'm using this code within a form, and once the form is submitted, the values for make/model aren't changed to their respective names, instead showing their form values. Being a complete JS noob, how would I go about changing the values submitted from values to make/model names?
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
$model.html($options.filter('[value="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
var $model = $('#model'),
$year = $('#year'),
$yearOptions = $year.find('option');
$model.on('change', function() {
$year.html($yearOptions.filter('[value="' + this.value + '"]'));
$year.trigger('change');
}).trigger('change');
var $year = $('#year'),
$identifier = $('#identifier'),
$identifierOptions = $identifier.find('option');
$year.on('change', function() {
var filteredIdetifiers = $identifierOptions.filter('[value="' + this.value + '"]');
debugger
if (!($("#make").val() == 3 && $("#model option:selected").text() == 'Falcon')) {
filteredIdetifiers = filteredIdetifiers.filter(function(i, e) {
return e.value !== '3'
});
}
$identifier.html(filteredIdetifiers);
$identifier.trigger('change');
}).trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Vehicle Brand Selector List -->
<select name="make" id="make">
<option value="0">Make</option>
<option value="1">BMW</option>
<option value="2">Daewoo</option>
<option value="3">Ford</option>
<option value="4">Holden</option>
<option value="5">Honda</option>
<option value="6">Hyundai</option>
<option value="7">Isuzu</option>
<option value="8">Kia</option>
<option value="9">Lexus</option>
<option value="10">Mazda</option>
<option value="11">Mitsubishi</option>
<option value="12">Nissan</option>
<option value="13">Peugeot</option>
<option value="14">Subaru</option>
<option value="15">Suzuki</option>
<option value="16">Toyota</option>
<option value="17">Volkswagen</option>
</select>
<!-- Vehicle Model List -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="1">318i</option>
<option class="lanos" value="2">Lanos</option>
<option class="courier" value="3">Courier</option>
<option class="falcon" value="3">Falcon</option>
<option class="festiva" value="3">Festiva</option>
<option class="fiesta" value="3">Fiesta</option>
<option class="focus" value="3">Focus</option>
<option class="laser" value="3">Laser</option>
<option class="ranger" value="3">Ranger</option>
<option class="territory" value="3">Territory</option>
<option class="astra" value="4">Astra</option>
<option class="barina" value="4">Barina</option>
<option class="captiva" value="4">Captiva</option>
<option class="colorado" value="4">Colorado</option>
<option class="commodore" value="4">Commodore</option>
<option class="cruze" value="4">Cruze</option>
<option class="rodeo" value="4">Rodeo</option>
<option class="viva" value="4">Viva</option>
</select>
<!-- Vehicle Year List -->
<select name="year" id="year">
<option value="0">Year</option>
<option value="1">1998</option>
<option value="1">1999</option>
<option value="1">2000</option>
<option value="1">2001</option>
<option value="1">2002</option>
<option value="1">2003</option>
<option value="1">2004</option>
<option value="1">2005</option>
<option value="2">1997</option>
<option value="2">1998</option>
<option value="2">1999</option>
<option value="2">2000</option>
<option value="2">2001</option>
<option value="2">2002</option>
<option value="2">2003</option>
<option value="3">1991-1999</option>
<option value="4">1997-2007</option>
<option value="5">1997-2007</option>
<option value="3">2002</option>
<option value="3">2003</option>
<option value="3">2004</option>
<option value="3">2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
<option value="4">1997-2005</option>
</select>
<!-- Vehicle Identity List -->
<select name="identifier" id="identifier">
<option value="0">Type</option>
<option class="E46" value="1">E46</option>
<option class="1997-2003" value="2">N/A</option>
<option class="1997-2007" value="4">N/A</option>
<option class="1997-2007" value="5">N/A</option>
<option class="5041618" value="3">BA</option>
<option class="1997-2005" value="3">AU</option>
<option class="1997-2005" value="3">AU2</option>
<option class="1997-2005" value="4">N/A</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
<option class="1997-2005" value="4">1997-2005</option>
</select>
In every <option> tag there is an attribute called value. This value attribute is what is returned at as the value of the dropdown when that option is selected. Seems like in the code you found they are all simply set to numbers. You can set them to be whatever you want though:
<option value="Ford">Ford</option>
<option class="focus" value="Focus">Focus</option>
FIXING DYNAMIC OPTIONS
I see that modifying the values directly affect how the dynamic options are displayed. For example the value attribute of the car model dropdown is used to filter the car make dropdown by only displaying options with the same value. Instead of using the model dropdown's value attributes to compare with make, we can add a new data- attribute called data-make and filter the model dropdown based on that instead. This allows you to freely modify the value attribute in model. The example code below shows this. You would need to modify your JS so model affects year, and year affects identifier in the same way.
$(document).ready(function() {
var $make = $('#make'),
$model = $('#model'),
$options = $model.find('option');
$make.on('change', function() {
// We now filter model using the data-make attribute, not value
$model.html($options.filter('[data-make="' + this.value + '"]'));
$model.trigger('change');
}).trigger('change');
$('#carForm').submit(function(e) {
e.preventDefault();
let formData = $(this).serializeArray();
let data = {};
for (let i = 0; i < formData.length; i++) {
data[formData[i].name] = formData[i].value;
}
alert('Make: ' + data.make + '\nModel: ' + data.model);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="carForm">
<select name="make" id="make">
<option value="0">Make</option>
<option value="BMW">BMW</option> <!-- These values are now make names -->
<option value="Daewoo">Daewoo</option>
<option value="Ford">Ford</option>
</select>
<!-- Vehicle Model List -->
<!-- Notice the new "data-make" attributes for each -->
<select name="model" id="model">
<option value="0">Model</option>
<option class="318i" value="318i" data-make="BMW">318i</option>
<option class="lanos" value="Lanos" data-make="Daewoo">Lanos</option>
<option class="courier" value="Courier" data-make="Ford">Courier</option>
<option class="falcon" value="Falcon" data-make="Ford">Falcon</option>
<option class="festiva" value="Festiva" data-make="Ford">Festiva</option>
<option class="fiesta" value="Fiesta" data-make="Ford">Fiesta</option>
<option class="focus" value="Focus" data-make="Ford">Focus</option>
</select>
<button type="submit">Submit</button>
</form>
You can get the selected option text like this.
$('#form').submit(function(e) {
e.preventDefault();
var make = $make.find(':selected').text();
}
But it would be good practice to set the value you expect to return as the option value and use a data attribute or class to handle the filtering logic.

Displaying multiple Select Values into an alert? [duplicate]

This question already has answers here:
How to get all selected values of a multiple select box?
(28 answers)
Closed 5 years ago.
I'm still a beginner hence this is difficult, but how do I display the options I selected into an alert box. So it would be "You selected (value), (value), (value)".
This is my select list
<form id='form1'>
<select id="options" multiple >
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>
Should I add a button. But what I'm struggling with is the javascript.
The easiest way to access selected elements of a select tag is with the "selectedOptions" property.
I would do it this way:
var form = document.getElementById('form1');
form.addEventListener('submit', function () {
var select = form.querySelector('#options'),
options = select.selectedOptions,
values = [];
for (var i = options.length - 1; i >= 0; i--) {
values.push(options[i].value);
}
alert('You selected: ' + values.join(', '));
}, false);
Try something like this:
function selectedValues()
{
var x=document.getElementById("options");
var selectedValues= '';
for (var i = 0; i < x.options.length; i++) {
if(x.options[i].selected ==true){
selectedValues += x.options[i].value + ", ";
}
}
alert("You selected: "+ selectedValues.slice(0, -2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id='form1'>
<select id="options" multiple onchange="selectedValues()">
<option value="action">Action</option>
<option value="animation">Animation</option>
<option value="children">Children</option>
<option value="classics">Classics</option>
<option value="comedy">Comedy</option>
<option value="documentary">Documentary</option>
<option value="drama">Drama</option>
<option value="family">Family</option>
<option value="foreign">Foreign</option>
<option value="games">Games</option>
<option value="horror">Horror</option>
<option value="music">Music</option>
<option value="new">New</option>
<option value="scifi">Sci-Fi</option>
<option value="sports">Sports</option>
<option value="travel">Travel</option>
</select>
</form>

multiple select boxes with same options - require unique selection

I have a form with 3 select boxes. Each select box has the same options. I want to require that you have to select a different option for each select box. For example, let's say the options are "cat", "dog" and "bird". If someone selects "bird" in the first select box, I want to disable or hide that option from the other two boxes. If they change their selection, then "bird" will be enabled or unhidden again.
<select id="box1">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
I assume I can do this with jquery onchange but I'm not sure how to require the unique selection across different select boxes.
$('select').on('change', function() {
// If option is selected, disable it in all other select boxes. If option is deselected, reenable it in all other select boxes.
})
Thanks for your help!
1) Top To Bottom Priority Approach
The flow must be top to bottom. This also means when ever the user changes the dropdown value all the next dropdown's which come after it must be reset. Having said this, here is my code snippet.
HandleDropdowns($('#box1')); //initially call this function to handle the dropdowns by passing the first dropdown as parameter
$('select').on('change', function() {
HandleDropdowns($(this)); // handle all dropdowns on any change event.
});
function HandleDropdowns(element) {
var $element = element;
var value = $element.val();
$element.nextAll().val(''); //using nextAll lets reset all the following dropdowns
$element.nextAll().attr('disabled', 'disabled'); //disable all the following dropdowns.
HandleOptions(); // call this function to toggle the options
if (value.length) {
$element.next().removeAttr('disabled'); // only if this dropdown has some selection enable the next dropdown.
}
}
function HandleOptions() {
$('option').removeAttr('disabled'); //reset all the options to be available
$.each($('select'), function() { //loop from top to bottom and disable the options one by one.
var value = $(this).val();
if (value.length) {
$(this).nextAll().find('option[value="' + value + '"]').attr('disabled', 'disabled');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
2) All Select Box With Same Priority Approach
In this approach when ever the user selects a value we check if any other dropdown has the same value, If yes reset it else do nothing. Below is a working sample.
$('select').on('change', function() {
HandleDropdowns($(this));
});
function HandleDropdowns(element) {
var $element = element;
var value = $element.val();
$.each($('select').not($element), function() { //loop all remaining select elements
var subValue = $(this).val();
if (subValue === value) { // if value is same reset
$(this).val('');
console.log('resetting ' + $(this).attr('id')); // demo purpose
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
Try this
$('select').on('change', function () {
$("select").find("option").removeAttr("disabled");
$("select").not(this).find("option[value=" + $(this).val() + "]").attr("disabled", "disabled");
});
You can use onchange listener and evaluate the results simultaneously. Also add an reset button cause once three get selected, it becomes bottle neck case.
The working code is given below
function changeSelect(elements) {
var values = {};
elements.forEach(function(item){
values[item.id] = item.value;
});
elements.forEach(function(item){
for(var i = 0; i < item.children.length; i++) {
for(ids in values) {
if(item.id != ids && item.children[i].value == values[ids]) {
item.children[i].style.display = 'none';
}
}
}
});
}
function resetSelection(elements) {
elements.forEach(function(item){
item.value = '';
for(var i = 0; i < item.children.length; i++) {
item.children[i].style.display = '';
}
});
}
var box1 = document.getElementById('box1');
var box2 = document.getElementById('box2');
var box3 = document.getElementById('box3');
var boxArray = [box1, box2, box3];
boxArray.forEach(function(item){
item.addEventListener('change', changeSelect.bind(undefined,boxArray));
});
document.getElementById('reset').addEventListener('click', resetSelection.bind(undefined,boxArray));
<select id="box1">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box2">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<select id="box3">
<option value="">Select An Option</option>
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="bird">Bird</option>
</select>
<button id="reset">Reset</button>

Categories