We Keep Coding

Replacing options on <select> dynamically from JavaScript array

In a bespoke shopping cart, I pull from my database a list of options that a particular product has. The number of these options can vary by product.
I then turn that list of options into a JavaScript array.
An example with 3 options:
{"Small":{"Super":{"Pack":"parta","Case":"parte"},"Maxi":{"Pack":"partb","Case":"partf"}},"Large":{"Super":{"Pack":"partc","Case":"partg"}},"X Large":{"Maxi":{"Pack":"partd"}}}
Using the above, I would now like to generate an HTML select field, listing all the "first" options:
<select>
<option value="Small">Small</option>
<option value="Large">Large</option>
<option value="X Large">X Large</option>
</select>
Once the user has selected the first option, I then need another <select> box to then load with options that are available for their selection. So, if they selected "Small" from above, the new select box would be:
<select>
<option value="Super">Super</option>
<option value="Maxi">Maxi</option>
</select>
Finally, when they select from this list, a 3rd select box loads in the final options, along with the part numbers as values:
<select>
<option value="parta">Pack</option>
<option value="parte">Case</option>
</select>
The number of options can vary, from zero to 4. But, each time when options are available, I need to pull the part number based on the users selection. The part number doesn't necessarily need to be the value of the last select, it can be pushed to a new hidden variable.
I can achieve this using ajax, by making an ajax call every time a selection is chosen, but can it be done via JavaScript / jQuery, without having to make ajax calls, given that the array is on the page and available to use?

When you dynamically create the select element, also determine which "node" in your tree structure goes with that element, and use it to:
add a default "Please select..." option to the select element
populate the select element further with the real options
determine the deeper node when an option is selected (also when the initial selection is made when the element is created), and use it to create the next select element with the same function
This cascade stops when the deeper node does not exist (when "Please select..." is selected) or it happens to be a string and not an object.
Here is some code for inspiration:
let optionTree = {"Small":{"Super":{"Pack":"parta","Case":"parte"},"Maxi":{"Pack":"partb","Case":"partf"}},"Large":{"Super":{"Pack":"partc","Case":"partg"}},"X Large":{"Maxi":{"Pack":"partd"}}};
let container = document.querySelector("#container");
addSelector(optionTree);
function addSelector(node) {
let select = document.createElement("select");
// Start with the default option:
let option = document.createElement("option");
option.text = "Please select...";
select.add(option);
for (let key in node) { // Populate the select element
let option = document.createElement("option");
option.value = key;
option.text = key;
select.add(option);
}
container.appendChild(select); // Add it to the page
function change() {
// Remove select elements that come after the selection
while (select.nextElementSibling) {
select.nextElementSibling.remove();
}
let key = select.value;
if (node[key] && typeof node[key] !== "string") {
addSelector(node[key]); // Create the next select element(s)
}
}
// Call the above function whenever a selection is made
select.addEventListener("change", change);
change(); // ... and also call it now
}
<div id="container"></div>

Assuming you already have the three select elements in the DOM, you can populate the first select, and add a change event listener to both the first and second to achieve this. Try this
let $s1 = document.querySelector('#select-1');
let $s2 = document.querySelector('#select-2');
let $s3 = document.querySelector('#select-3');
let object = {"Small":{"Super":{"Pack":"parta","Case":"parte"},"Maxi":{"Pack":"partb","Case":"partf"}},"Large":{"Super":{"Pack":"partc","Case":"partg"}},"X Large":{"Maxi":{"Pack":"partd"}}};
// add options to first select
$s1.innerHTML = '<option></option>'; // empty select
Object.keys(object).forEach(val => $s1.append(new Option(val, val))); // append children
$s1.dispatchEvent(new Event('change')); // trigger change event
// listen to change event on first select/get options for second select
$s1.addEventListener('change', function(e){
$s2.innerHTML = '<option></option>'; // empty select
// append children
Object.keys(object[e.target.value] ?? []).forEach(val => {
$s2.appendChild(new Option(val, val));
});
// trigger change event
$s2.dispatchEvent(new Event('change'));
});
// listen to change event on second select/get options for third select
$s2.addEventListener('change', function(e){
$s3.innerHTML = '<option></option>'; // empty select
// append children
Object.entries(object[$s1.value]?.[e.target.value] ?? []).forEach(([key, val]) => {
$s3.appendChild(new Option(key, val));
});
});
select {min-width:80px}
<select id="select-1"></select>
<select id="select-2"></select>
<select id="select-3"></select>

How can I hide/show options on the fly with bootstrap-multiselect?

I am using bootstrap-multiselect to give the user great controller over two key menus. My first menu is called groups and other called queues. Each option in the queues has an HTML5 data attribute (i.e. data-group="X", where X is a group-value)
When the user selects a option/group from the groups menu, I want to find and hide every queue/option in the queues menu where data-group is not equal to a selected group in the groups menu.
After identifying the queues/items that needs to be hidden/showing, I tried to use .show() and .hide() extensions. Then I tried to use .addClass('hidden') and .removeClass('hidden') methods, but nothing is working for me.
How can I show/hide items on the fly with bootstrap-multiselect?
Here is my code
$(function () {
var queueGroupIds = $('#QueueGroupIds');
var queueIds = $('#QueueIds');
queueGroupIds.multiselect({
nonSelectedText: 'Select group(s)',
onChange: function (option, checked, select) {
var groups = queueGroupIds.find('option:selected');
if (groups.length == 0) {
//When none of the groups are selected, show all queues!
queueIds.find('option').each(function (i, q) {
$(q).show();
});
}
var queueToDeselect = [];
//loop over every select option "if any are selected"
groups.each(function (index, grp) {
var group = $(grp);
// loop over every queue option
queueIds.find('option').each(function (i, q) {
var queue = $(q);
//id the data-group value == selected group show the item
if (queue.data('group') == group.val()) {
queue.show();
//this prints the value which should be showing
console.log('showing', queue.val());
} else {
queueToDeselect.push(queue.val());
queue.hide();
//this prints the value which should be hidden
console.log('hidding', queue.val());
}
});
});
//Delected all hidden queues
queueIds.multiselect('deselect', queueToDeselect);
queueIds.multiselect('refresh');
}
});
queueIds.multiselect({
nonSelectedText: 'Select queue(s)'
});
});

Edited for default none selected:
Example shown in the following fiddler (I've trimmed it down to a base example for clarity): https://jsfiddle.net/m6uuL53w/3/
No need for any manual messy DOM ADD/REMOVE manipulation. Multiselect will carry over the disabled class you put on your raw list so you just need target it with css after you set the disabled values and refresh your list. Let multiselect worry about dom manipulation.
Example HTML:
<select id="one" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="two" multiple="multiple">
<option data-group="1" value="OneA" disabled >One A</option>
<option data-group="1" value="OneB" disabled>One B</option>
<option data-group="2" value="TwoA" disabled>Two A</option>
<option data-group="2" value="TwoB" disabled>Two B</option>
<option data-group="3" value="ThreeA" disabled >Three A</option>
</select>
Jquery:
$(document).ready(function() {
$('#one').multiselect({
onChange: function(element, checked) {
var opts = $('*[data-group="'+ element.val() +'"]');
if (checked === true) {
opts.prop('disabled', false).prop('selected', false);
}
else if (checked === false) {
opts.prop('disabled', true).prop('selected', false);
}
$("#two").multiselect('refresh');
}
});
$('#two').multiselect();
});
Just a pinch of CSS:
.multiselect-container > li.disabled { display:none;}

https://jsfiddle.net/ta1wvs3j/1/
//Because we alter the DOM, we need to save an instance of the original list
//There are many ways to do this, I chose an easy one
var globalClone = $('#queues option');
//Init the queues
$('#queues').multiselect({
nonSelectedText: 'Select queue(s)',
onChange: function (option, checked, select) {
}
});
//Init the groups
$('#groups').multiselect({
nonSelectedText: 'Select group(s)',
onChange: function (option, checked, select) {
//Store the list of selections in an array
var selections = $('#groups').val();
//Reset the queue to it's starting list so we can loop
$('#queues').html(globalClone);
//Look at each option
$('#queues option').each(function(){
//"includes" may not be widly suppoerted but there are other ways to see if a value is in an array
//Check to see if the data-group value is in the selections array, if it's not
if( selections.includes(String($(this).data('group'))) == false ){
//Remove the option from the DOM
$(this).remove();
}
});
//Rebuild, per the multiselect docs basically reinit the select. Nice we don't have to destroy and recreate.
$('#queues').multiselect('rebuild');
}
});
This isn't how I'd leave production code exactly but it shows you how it can work.
Basically, loop, check, alter DOM, and rebuild multiselect. I think this is what you want.

Click on a select html element

I've got a Problem. I have a Select Option in HTML
<div id="eilig">
<select id="eiligselect" data-role="slider">
<option value="2" selected="selected">n. Eilig</option>
<option value="1">Eilig</option>
</select>
</div>
On page default "n. Eilig" is selected. After I have made a ajax post request (with "Eilig" selected) the select option should go back to default ("n. Eilig")
I have tried it with $('#eiligselect').val(2); but this only change the value back but the select option shows "Eilig" (but internal value is "n. Eilig".
This select is with a data-role "slider" which emulates a on / off switch like in ios.
So I think I have to click that slider with javascript to change it back instead of just change the value.
Do you have a clue? Thanks.

Try this : put selected attribute for option with value="2"
$('#eiligselect option[value="2"]').attr('selected',true);

Bind the event on change for slider on select value change,
$('#eiligselect').on('change', function() {
var activeLabel = $('span.ui-slider-label');
var mySlider = $(this);
var new2 = 'n. Eilig';
var new1 = 'Eilig';
if(mySlider.val() == 1) {
activeLabel.text(new2);
} else {
activeLabel.text(new1);
}
mySlider.slider( 'refresh' ); // .trigger( 'create' )
});

This Code may help you solving your problem,
var eiligselect = $("#eiligselect")[0];
eiligselect.seletedIndex = 0;

Alert when user select the same <option> in dynamically created <selects>

I have a PHP page that creates multiple selects depending on how many the page before it gives it and creates the same number of options that there are selected (it's to choose the priority).
<select name="select1" id="idSelect" onchange="javascript:SelectOnChange();">
<option value="Select one">Select one</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
What I want to do is, whenever the user chooses an option that was already selected in another selection, to show an alert in order to let them know that their choice has already been taken and deny the change.
I want to compare the currently selected option to every previously selected option every time the user selects something from every select.

Basically your looking for a change event to loop through each select and notify duplicates.
$("select").change(function() {
var currentSelection = this.value;
$("select").each(function() {
if (this.value == currentSelection) {
alert("you've already chosen this!");
}
});
});
Something like this should work

Listen for change events
Get the element's seletedIndex
Grab all of the selects with getElementsByTagName()
Loop through and get the selected index
Compare to see if used

This could maybe work :
var $selects = $('select');
// WHen a select is changed.
$selects.onchange(function() {
// Storing it's selected value, assuming there is only one per select.
var value = $(this).selected().first().attr('value');
var $changedSelect = $(this);
// For each select...
$selects.each(function() {
var $otherSelect = $(this);
// ...that is not the one that just changed.
if( ! $otherSelect.is($changedSelect)) {
// If that other select's selected value is the same as the changed one's
if($otherSelect.selected().first().attr('value') === value) {
alert('...');
}
}
});
}
I didn't try it though, you might have to change a few details in it if it doesn't work.

Display specific data based on a combo box selection

I have 2 combo boxes. I want to display specific data in combo box 2 based on combobox 1 selection.
But I want to make it an ontime selection ... so when I press on the option I want from combobox 1 , combobox 2 is filled with data matching this selection.
I tried to put an on click function on combobox 1 options, but it didn't work when I click on them ...
So is there some method to do so ?

Assign the change event handler on the first dropdown, and then, based on the selected value, fetch the values that ought to be put in the second dropdown. Here's a typical manufacturer -> model example:
Markup:
​<select id="manufacturers">
<option></option>
<option value="Audi">Audi</option>
<option value="Toyota">Toyota</option>
</select>
<select id="cars">
</select>
JavaScript:
​​var cars = {
Audi: [ 'A2', 'A3', 'A4' ],
Toyota: [ 'Auris', 'Avalon', 'Yaris' ]
}​​​​;
$("#manufacturers").change(function () {
var $this = $(this);
var selectedValue = $this.val();
if (selectedValue) {
var $cars = $("#cars").empty();
var newCars = cars[selectedValue];
$.each(newCars, function () {
console.log(this);
$("<option>" + this + "</option>").appendTo($cars);
});
}
});
​
DEMO.

You should use the change (not click) event on the select tag itself (not on the option tag).
Example:
$('#combo1').change(function() {
// Load new content for #combo2 here
});

$('select.option1').change(function() {
// fill option2 with data from somewhere
});

Chained is simple jQuery plugin for chained selects
http://www.appelsiini.net/projects/chained
I've used this Plugin in some Projects and it works stable and as expected. Feel free to try it…