We Keep Coding

How do I know the last unselected option from a multiselect dropdown?

I have a multi select Listbox
<div id="multiselectList">
<select>
<option value="option1">Val 1</option>
<option value="option2">Val 2</option>
<option value="option3">Val 3</option>
<option value="option4">Val 2</option>
<option value="option5">Val 3</option>
</select>
Suppose all the options are selected initially. Now I unselect option2 from multi select list. How can I know which option is currently unselected by the user. I used below code but it was giving me all the unselected values.
var unselectedValue = $("#multiselectList").find('option:not(:selected)');
Can anyone help me in finding the solution?
Thanks in advance

You can use jquery last() for it
https://api.jquery.com/last/
document.querySelector('select').addEventListener('change', () => {
var unselectedValue = $("#multiselectList").find('option:not(:selected)').last();
console.log(unselectedValue.val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
<select multiple>
<option value="option1" selected>Val 1</option>
<option value="option2" selected>Val 2</option>
<option value="option3">Val 3</option>
<option value="option4">Val 4</option>
<option value="option5" selected>Val 5</option>
</select>

Try Using
$(document).ready(function() {
$("#sel").on("click", function(event) {
if(!event.originalEvent.srcElement.selected) {
console.log($(event.originalEvent.srcElement).val());
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
<select id="sel" multiple>
<option value="option1" selected>Val 1</option>
<option value="option2" selected>Val 2</option>
<option value="option3" selected>Val 3</option>
<option value="option4" selected>Val 4</option>
<option value="option5">Val 5</option>
</select>

Try using
// save array to compare in function check
let lastSelected = [];
// set last selected value on document ready
$(document).ready(() => {
lastSelected = $('select option:not(:selected)')
.map((i, el) => el.value)
.get();
});
$('select').on('change', () => {
const currentSelected = $('select option:not(:selected)')
.map((i, el) => el.value)
.get();
// compare to get recently selected
const selected = lastSelected.filter(
(val) => !currentSelected.includes(val)
);
// compare to get recently unselected
const unselected = currentSelected.filter(
(val) => !lastSelected.includes(val)
);
recentChanges(selected, unselected);
// update last selected
lastSelected = currentSelected;
});
// recentChanges event
function recentChanges(selected, unselected) {
console.log(
(selected.length > 0 ? selected : 'nothing') + ' is selected'
);
console.log(
(unselected.length > 0 ? unselected : 'nothing') + ' is unselected'
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
<option value="option1" selected>Val 1</option>
<option value="option2" selected>Val 2</option>
<option value="option3">Val 3</option>
<option value="option4">Val 4</option>
<option value="option5" selected>Val 5</option>
</select>

How can I know which option is currently unselected by the user.
// This is the selected value on page load
let selected = $("#multiselectList option:selected").text()
// On change event
$("#multiselectList select").on("change", function(){
// Keep the previous selection
let prevSelection = selected
// Get the new one
selected = $(this).find('option:selected').text();
// Results
console.log(`${prevSelection} was deselected and ${selected} was selected.`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
<select>
<option value="option1">Val 1</option>
<option value="option2">Val 2</option>
<option value="option3" selected>Val 3</option>
<option value="option4">Val 4</option>
<option value="option5">Val 5</option>
</select>
</div>

How to modify a html select to display all options with matching data attribute?

I have a html select drop-down listing various cats, each with a data attribute of "color", an associated color, and a button next to the drop-down.
Using pure javascript, I want to be able to click the button, get the "color" attribute of the selected cat, and have the list display all cats with the same color attribute.
Example: I've selected Cat 1 who has a color attribute of "black", I click the button and the drop down displays Cats 1, 3 and 4 as options.
Would I need to implement a for loop, or would for/in statement work?
function filter() {
//onclick modifies the "catList" select to display all cats with the same data-color attribute.
var list = document.getElementByID("catList");
};
<form>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
</select>
</form>
<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>

Loop over the option list, and add display none, to options that don't have the same data attribute value as with the selected option.
Option 1 (this will hide the other options, and you won't be able to select them, until you refresh the page)
function filter() {
//onclick modifies the "catList" select to display all cats with the same data-color attribute.
var list = document.getElementById("catList");
var option = list.options[list.selectedIndex]
list.querySelectorAll('[data-color]').forEach(function (element) {
if (option.getAttribute('data-color') !== element.getAttribute('data-color')) {
element.classList.add('filter');
}
})
};
.filter {
display: none;
}
<form>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
</select>
</form>
<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>
Option 2
function filter() {
//onclick modifies the "catList" select to display all cats with the same data-color attribute.
var list = document.getElementById("catList");
var color_filter = document.getElementById("color");
var value = color_filter.options[color_filter.selectedIndex].value;
list.querySelectorAll('[data-color]').forEach(function (element) {
if (value !== element.getAttribute('data-color')) {
element.classList.add('filter');
}else {
element.classList.remove('filter');
}
});
};
.filter {
display: none;
}
<select id="color" onchange="filter()">
<option value="">Select filter</option>
<option value="black">Black</option>
<option value="orange">Orange</option>
</select>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
</select>

You can try by this way
HTML
<form>
<select id="catList">
<option data-color="black">Cat 1</option>
<option data-color="orange">Cat 2</option>
<option data-color="black">Cat 3</option>
<option data-color="black">Cat 4</option>
<option data-color="orange">Cat 5</option>
<option data-color="black">Cat 6</option>
</select>
</form>
<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>
JS
window.filter = function () {
var action_list = document.getElementById("catList");
var selected_color = action_list.options[action_list.selectedIndex].getAttribute("data-color");
for (var i = action_list.options.length - 1; i >= 0; i--) {
if (action_list.options[i].getAttribute("data-color") != selected_color) {
action_list.remove(i);
}
}
};
Solution 1. see live demo here jsfiddle
Solution 2. see live demo here jsfiddle

jQuery - Change id according to the value selected from the select field

I'm trying to change the id of the select field with a JS function, please take a look at my HTML and JS code.
HTML:
<select name="cat-parent" id="change_id();">
<option selected="selected" value=""></option>
<option value="category-2">Category 2</option>
<option value="category-3">Category 3</option>
<option value="category-4">Category 4</option>
<option value="category-2">Category 2</option>
<option value="category-1">Category 1</option>
</select>
JS:
function change_id(){
var idSuffix = jQuery(this).val();
return 'example' + idSuffix;
}

You need to bind change event handler.
$('[name=cat-parent]').on('change', function() {
$(this).attr("id", 'example' + $(this).val());
});

Shopify Drop down Validation

I'm building a web store on shopify. I want to add a validation to dropdown that if no size/value is selected from drop down, it automatically select 1st size/value. when we click on add to cart button.
Thanks for the help.

Given this HTML:
<select id="drop">
<option value="0">Please select</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<button id="add">Add to cart</button>
Use this javascript/jQuery:
$(document).ready(function() {
var $drop = $("#drop");
$("#add").on("click", function() {
if($drop.val() == 0) {
$drop.val(1);
}
});
});
http://jsfiddle.net/82vrccem/1/

Here I have mention a drop-down list and after that the JavaScript validation also given.
<select id="dropdown">
<option value="0">Select</option>
<option value="1">Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>
Use the flowing JavaScript validation for upper drop-down list.
function Validate()
{
var e = document.getElementById("dropdown");
var strUser = e.options[e.selectedIndex].value;
//if you need text to be compared then use
var strUser1 = e.options[e.selectedIndex].text;
if(strUser==0) //for text use if(strUser1=="Select")
{
alert("Please select a user");
}
}

Show/hide options from dropdown using jQuery

I have 3 dropdowns which contains more than 4 questions as options in each dropdowns. What I want to achieve is when a user selects one option from any dropdown, that particular option/question has to be hidden from other 2 dropdowns and when he changes his selection that option/question has to be shown again in the other 2 dropdowns. He can select questions from any dropdowns. Here is what I have tried till now. This particular piece of code will hide the options on select but I am not getting how exactly I can show it up back.
Javascript
var removeSelection = function (select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
var index = select.find(':selected').index();
$(this).find('option:eq(' + index + ')').hide();
});
};
$(function () {
$('select').change(function () {
removeSelection($(this));
});
});
HTML
<form id="form1">
<select id="select1">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
<select id="select2">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
<select id="select3">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
</form>
JSFIDDLE-
CLick Here
Updated Fiddle
Updated
Scenario 1 - Select one option from any dropdown.It should be disabled from other dropdowns.
Scenario 2 - Change option from same dropdown. Previous option should be enabled in other dropdowns.

Once you change the duplicate id's to common classes, You can try something like this
$('select').change(function () {
$("option:disabled").prop("disabled",false); // reset the previously disabled options
var $selectedQ = $(this).find("option:selected"); // selected option
var commonClass= $selectedQ.attr("class"); // common class shared by the matching options
$("."+commonClass).not($selectedQ).prop("disabled","disabled"); // disable the matching options other than the selected one
});
Updated Fiddle
(This won't work if there are more than one, different classes for the options, i'd use a common value or data attribute instead like)
$('select').change(function () {
$("option:disabled").prop("disabled", false);
var $selectedQ = $(this).find("option:selected")
var value = $selectedQ.val();
$("option[value='" + value + "']").not($selectedQ).prop("disabled", "disabled");
});
Demo
Update (as per comments)
$('select').change(function () {
var prevMatches = $(this).data("prevMatches");
if (prevMatches) prevMatches.prop("disabled", false)
var $selectedQ = $(this).find("option:selected")
var value = $selectedQ.val();
var $matches = $("option[value='" + value + "']").not($selectedQ);
$matches.prop("disabled", "disabled");
$(this).data("prevMatches", $matches);
});
Demo

You could do something like this:
var removeSelection = function (select) {
var id=select.attr("id");
$(".hide-"+id).show();
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
var index = select.find(':selected').index();
$(this).find("option").removeClass("hide-"+id);
$(this).find('option:eq(' + index + ')').each(function(){
if($(this).attr("id")!="selectOpt1"){
$(this).addClass("hide-"+id);
}
});
});
$(".hide-"+id).hide();
};
$(function () {
$('select').change(function () {
removeSelection($(this));
});
});
JSFiddle

Take a look
<form id="form1">
<select id="select1">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
<select id="select2">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
<select id="select3">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
</form>
$(document).on('change','select',function(e){
var elm = $(this);
elm.find('option').show();
$('select').not(elm).find('option',each(function(){
if($(this).attr('value')==$(elm).val()){
$(this).hide();
}else{
$(this).show();
}
}));
});