Disable multiple values in dropdowns based on another dropdown - javascript

I want disable multiple values in the second and third dropdown based on first dropdown selected values.I am able to do this for single selected value.But,How to do this for multiple selected values.
I have 3 drop downs and all are multi select drop downs.
My code is,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
});
</script>
</head>
<body>
<select name="project_manager[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

if (selectedItem) {
$(selectedItem).each(function(v,i) {
$dropdown2.find('option[value="' + i + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + i + '"]').prop('disabled', true);
});

Related

How to populate a selectbox depending on another selectbox using PHP JSON ARRAY

I'm trying to poplulate a select box that is dependent on another select box
<select>
<option value="a">a</option>
<option value="b">b</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
I want for example when a user selects the select1 (a), Select2 shows 1, 2 and 3
and when he chooses B, It shows 4,5,6 and so on.
The selectbox values is a PHP ARRAY object, I've tried jQuery to populate it using $.each but that didn't work out as the array is something like:
{ "Option 1":[ {"name" : "test", "age" : "1"}, .... ] }
Thanks in advance.
For example you have below json:
{
"Apple": {
"iphone SE": "https://www.apple.com/iphone-se/",
"iphone 7": "https://www.apple.com/iphone-7/"
},
"samsung": {
"galaxy s8": "http://www.samsung.com/us/explore/galaxy-s8/",
"galaxy s7": "http://www.samsung.com/us/explore/galaxy-s7/"
}
}
For this we must to use javascript and It's good to use jQuery(a library for javascript).Take a look at the example below:
$(function() {
var selectValues = {
"apple": {
"iphone SE": "https://www.apple.com/iphone-se/",
"iphone 7": "https://www.apple.com/iphone-7/"
},
"samsung": {
"galaxy s8": "http://www.samsung.com/us/explore/galaxy-s8/",
"galaxy s7": "http://www.samsung.com/us/explore/galaxy-s7/"
}
};
var $vendor = $('select.mobile-vendor');
var $model = $('select.model');
$vendor.change(function() {
$model.empty().append(function() {
var output = '';
$.each(selectValues[$vendor.val()], function(key, value) {
output += '<option>' + key + '</option>';
});
return output;
});
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<select class="mobile-vendor">
<option value="apple">Apple</option>
<option value="samsung">Samsung</option>
</select>
<select class="model">
<option></option>
</select>
</p>
Here is an example of how to implement the change with jquery.
Please post/explain your objects format a little more and I will create a loop to parse it correctly.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<select id="letter">
<option value="a">a</option>
<option value="b">b</option>
</select>
<select id="age">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<script>
$("#letter").change(function(){
if($("#letter").val() === "a"){
$("#age")
.empty()
.append('<option selected="selected" value="1">1</option>')
;
}else{
$("#age")
.empty()
.append('<option selected="selected" value="5">5</option>')
;
}
});
</script>
</body>
</html>
// you can try something like this.
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s1Value = s1.value;
var i;
var frag = document.createDocumentFragment();
var ele;
if(s1Value == 'a'){
for(i=0;i<3;i++){
ele = document.createElement('option');
ele.value = i + 1;
ele.innerHTML = i + 1;
frag.appendChild(ele);
}
}
s2.innerHTML = ''
s2.appendChild(frag);
Thanks guys for all the help however, I followed another approach. which is to output the whole PHP array in the select as options, and hide them all, and when an option in select1 is chosen, I use jQuery to only show the items that has a specific attribute:
<script>
$(".select2").prop("disabled", true);
$(".select1").change(function() {
$('.select2').prop('disabled', false);
$(".select2 option").hide();
var currentVal = $('.select1 :selected').attr('optionis'),
ValueSelected = $(".select2 option[optionvalue*='" + currentVal + "']");
ValueSelected.show();
$(ValueSelected).first().prop("selected", true);
});
</script>
<select class="select1">
<option value="1" optionis="1">Option 1</option>
<option value="2" optionis="2">Option 2</option>
</select>
<select class="select2">
<option value="1" optionvalue="1">Value 1</option>
<option value="2" optionvalue="1">Value 2</option>
<option value="1" optionvalue="2">Value 3</option>
<option value="1" optionvalue="2">Value 4</option>
<option value="1" optionvalue="2">Value 5</option>
</select>
CODEPEN

Select item from selection box

I want to select my country from the selection box;
http://tr.investing.com/currencies/single-currency-crosses
there is a change_result(); in it's on change.
I get the selection box as;
$("#symbols")
But how will I trigger the on change box and reload the page according to the new selected option.
Something like this maybe?
$("#myselect").change(function() {
var selectedOption = $("#myselect option:selected").text();
var selectedValue = $(this).val();
// Do something here
$("#"+selectedValue).fadeIn(1000);
});
<div id="2" style="display:none;">
Magic Text
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
I think this will helps you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="symbols">
<option value="0">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
<script>
$(function(){
$('#symbols').on('change',function(){
var value=$(this).val();
alert(value);
});
});
</script>

jQuery disable other dropdown values based on selected value of other dropdown

I have in my website 3 dropdowns and every dropdown has 8 options (1 to 8).
My goal is to disable the dropdown options based on what you've already selected in the other dropdowns, the total sum is maximum 8. So for example if you select 4 in the first dropdown you can only select 1 to 4 in the other 2 dropdowns.
If you select 8 in the first you can't select anything else from the others.
This is what I've tried:
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function() {
$(this).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function() {
$(this).attr("disabled", true);
});
});
The problem with this is that it only work the first time you select something, unfortunately.
EDIT: jsfiddle update https://jsfiddle.net/k7krx87L/4/
Thanks in advance!
You would use the following selector:
$("#input_1_6 option:gt(4)").prop("disabled", true);
This means disable all options in element with id #input_1_6 starting from 5th, the selector gt(4) means elements from index 4, indexes start from 0 in DOM.
<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script>
$(function () {
$('#input_1_5').on('change', function (){
var input_1_5 = $(this).val();
var input_1_6 = $('#input_1_6').val();
var input_1_7 = $('#input_1_7').val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
$('#input_1_6').on('change', function (){
var input_1_5 = $('#input_1_5').val();
var input_1_6 = $(this).val();
var input_1_7 = $('#input_1_7').val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
$('#input_1_7').on('change', function (){
var input_1_5 = $('#input_1_5').val();
var input_1_6 = $('#input_1_6').val();
var input_1_7 = $(this).val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
});
</script>
<select name="" id="input_1_5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_6">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_7">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</body>
</html>
Hope this will help you.
Try this, it will work perfectly.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
});
</script>
</head>
<body>
<select name="project_manager[]">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="test_engineer[]" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

how to disable dropdown options based on the previously selected dropdown values in multi select dropdown?

i am having two multi select dropdowns. those two dropdowns will have the same set of options (like monday, tuesday ,wednesday). now i want to have a validation where in one dropdown of these selected to some options(these are multi select dropdowns.), then the same options should not be available to select from the other dropdown.(means those should be disable.) here for multi select i am using one UI js plugin multi select dropdown javascript plugin.
<label for="shift_day_list_1">Day</label>
<input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
<label for="shift_day_list_2">Day</label>
<input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
this is my js code:
$(document).ready(function() {
$('#day_list_1').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
$('#day_list_2').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
});
how to implement this? please help me?
I've created a full commented snippet for you:
// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {
// get both lists and their HTMLOptionElement nodes
var list1 = document.getElementById('day_list_1'),
list2 = document.getElementById('day_list_2'),
options1 = list1.querySelectorAll('option'),
options2 = list2.querySelectorAll('option');
// add event handlers when the lists are changed to call the update function
$(list1).change(update).SumoSelect();
$(list2).change(update).SumoSelect();
function update(e) {
// when the lists are changed, loop through their HTMLOptionElement nodes
var other = (list1 === this) ? list2 : list1;
for (var i = 0; i < options1.length; i++) {
// options of list1 should be disabled if selected in list2 and vice-versa
this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
}
}
});
.form-control {
width: 130px;
height: 130px;
}
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
you can use normal js to achieve this.Use this following code on day_list_‌​1 on onChange event.
document.getElementById("day_list_2").options[document.getElementById("day_list_‌​1").selectedIndex].disabled = true;
Take a look at this jsfiddle
Click here for jsfiddle example
$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');
But before this, you need to add change event to the first select/dropdownlist. I hope you can take from here..
Try this:
$('#day_list_1').on('change', function() {
$('#day_list_2').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
$('#day_list_2').on('change', function() {
$('#day_list_1').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
First you have to change the id of "day_list_1", because as per HTML standard there is only one id in the entire HTML of any tag.
So you should do like this :
First one :
<select class="form-control" id="day_list_1" multiple="multiple"
name="shift[day_list_1][]">
Next one:
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
Code for validation :
function validate(){
var error = false;
var selected_val_1 = [];
$('#day_list_1 :selected').each(function(i, selected){
selected_val_1[i] = $(selected).text();
});
var selected_val_2 = [];
$('#day_list_2 :selected').each(function(i, selected){
selected_val_2[i] = $(selected).text();
});
$.each(selected_val_1, function( index, value ) {
if($.inArray(value, selected_val_2) != -1){
error = true;
}
});
$.each(selected_val_2, function( index, value ) {
if($.inArray(value, selected_val_1) != -1){
error = true;
}
});
if(error == true){
return true;
}else{
return false;
}
}
I hope it helps you . If you have any query regarding this logic then you can revert me .
Thanks.
It will work fine for 3 drop downs also
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
});
</script>
</head>
<body>
<select id="project_manager" name="project_manager[]" multiple="multiple">
<option></option>
<option id="option" value="1">Test 1</option>
<option id="option" value="2">Test 2</option>
<option id="option" value="3">Test 3</option>
</select>
<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

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

Categories