We Keep Coding

jQuery Select box multiple option get value and match values

I have same classname multi select box with same values in body, what I want if use chose value 1 from first or any select box then that value 1 on all other select box option will disable so user can't choose the same value in other multi select box.
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
This need to achieve via javascript or jQuery,

So you're likely going to get downvotes. You haven't actually shown that you've tried anything, you have only given us the HTML and asked that we solve your problem.
That said, I like to sink my teeth into easy problems, as this is. What you're wanting to do is, in each select, listen for the change event. When that triggers, get the value of the selected option, and disable any option with that value in any other selects. Take a look at the following:
$(function() {
/********
* Function to disable the currently selected options
* on all sibling select elements.
********/
$(".myselect").on("change", function() {
// Get the list of all selected options in this select element.
var currentSelectEl = $(this);
var selectedOptions = currentSelectEl.find("option:checked");
// otherOptions is used to find non-selected, non-disabled options
// in the current select. This will allow for unselecting. Added
// this to support extended multiple selects.
var otherOptions = currentSelectEl.find("option").not(":checked").not(":disabled");
// Iterate over the otherOptions collection, and using
// each value, re-enable the unselected options that
// match in all other selects.
otherOptions.each(function() {
var myVal = $(this).val();
currentSelectEl.siblings(".myselect")
.children("option[value='" + myVal + "']")
.attr("disabled", false);
})
// iterate through and disable selected options.
selectedOptions.each(function() {
var valToDisable = $(this).val();
currentSelectEl.siblings('.myselect')
.children("option[value='" + valToDisable + "']")
.attr("disabled", true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="mySel" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel2" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel3" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select name="mySel4" class="myselect" multiple="multiple">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
Edited the above code to support multiple selects. Actually, it wasn't so much an issue of multiple selects, as I was doing a very lazy handling of unselecting options. Now, when the user is selecting or de-selecting options in any select, only the non-disabled options in that select are used: the (":checked") to disable that option in all other selects, and the .not(":checked") to re-enable any options that the user has somehow unselected.

Try this code , it should do the job:
using Not selector and for each to iterate on other select options:
$(document).ready(function() {
$('.myselect:first').change(function() { // once you change the first select box
var s = $('.myselect:first option:selected').val(); // get changed or clicked value
others = $(':not(.myselect:first) >option'); //select other controls with option value
others.each(function() {
if (this.value == s) // for example if you click on 1 the other controls will get 1 disabled
$(this).attr('disabled', 'disabled').siblings().removeAttr('disabled');
// remove disabled from others if you click something else
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>
<select class="myselect" multiple="multiple" name="mySel">
<option value="val1">option 1</option>
<option value="val2">option 2</option>
<option value="val3">option 3</option>
<option value="val4">option 4</option>
</select>

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>

Select the first option by value when there are duplicate values

I have a select list that contains duplicate values. I don't have the power to change this.
<select id="dropdown">
<option value="1">Item 1</option>
<option value="1">Item 1 again under a different name</option>
<option value="2">Item 2</option>
</select>
In a different place, I have a link element that, when clicked, calls $("#dropdown").val(1). This "Item 1 again under a different name" to be selected and displayed. I want "Item 1" to be selected instead. How can I accomplish this?

To do that you can select the option element by the value attribute and use the :first selector. Try this:
var value = 1;
$('#dropdown option[value="' + value + '"]:first').prop('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option>Please select...</option>
<option value="1">Item 1</option>
<option value="1">Item 1 again under a different name</option>
<option value="2">Item 2</option>
</select>

Try This :
$("#dropdown option[value=1]:first").prop({selected:true});

I guess there will be only one duplicate value in dropdown. First you need to find that value than select first option of same value.
var arrDuplicate = [];
var duplicateVal = 0;
$("#dropdown option").each(function () {
if (arrDuplicate.indexOf($(this).val()) > -1)
duplicateVal = $(this).val();
arrDuplicate.push($(this).val());
});
$("#dropdown option[value=" + duplicateVal + "]:first").attr("selected", "selected");

Within a multi select, I need to be able to get the value of the currently selected option

Edit:I think I have confused you guys with what I need. If I select val1 I need the function to return val1. If I then select val2, with val1 still selected as part of the multi select, I need to return val2. Then I can use the values to set the id and name of rewly created inputs.
I have a select list that has multiple="multiple"
I want to create a text input associated with each selected option and set the id and name of the new input based on the value of each newly selected option, but I always get the value of the first item from the onchange event. Not the first value, but the first selected value. So if I choose val2 first, that is returned, but if I choose val1 first then val2 the id and name will be the same as when val1 is selected.
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
I have used the following function and it returns the first value.
$("#multiSelect").on('change', function(evt, params) {
alert($("option:selected", this).val());
});
This will return the first selected option. If I then choose the second option, I still get the first value. I need to get the value of whichever option has been selected.
Thanks in advance.

The workaround is to save previously selected elements and compare them with newly selected ones:
let selectedOptions = [];
$("#multiSelect").on("change", function() {
const newSelectedOptions = $(this).val() || [];
const addedOptions = newSelectedOptions.filter(option => !selectedOptions.includes(option));
const removedOptions = selectedOptions.filter(option => !newSelectedOptions.includes(option));
selectedOptions = newSelectedOptions;
console.log("addedOptions", addedOptions);
console.log("removedOptions", removedOptions);
});
<select id="multiSelect" multiple="multiple">
<option value="value_1">Value 1</option>
<option value="value_2">Value 2</option>
<option value="value_3">Value 3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You get the selected values on change:
$("#multiSelect").on('change', function () {
var selected = $.map($('option:selected', this),
function (e) {
return $(e).val();
});
alert(selected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>

Try this one : http://jsfiddle.net/csdtesting/jb7ckarp/
$("#multiSelect").on('change', function(evt, params) {
$("#myDiv").append("<span id='mySpan'><input type='text' name='" + $(this).val() + "' value='My name is: " + $(this).val() + "'/>")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
<div id="myDiv">
</div>

Maybe this is what you want, or not :D http://jsfiddle.net/mnm2oaeo/
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
<script type="text/javascript">
var items = [];
$("#multiSelect").on('change', function(evt, params) {
var selected = $(this).val() || [];
if (selected.length == 0)
items.length = 0;
else {
$.each(selected, function(i) {
if (items.indexOf(selected[i]) == -1) {
items.push(selected[i]);
alert(selected[i]);
}
});
}
});
</script>

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();
}
}));
});