Develop Reference

Removal of selected Item in other dropdowns

I am facing issue such as below.
I have used 6 dropdown list in my page with similar values.
Now I want that if one option is selected from dropdown lits then it should be removed from other dropdown list, and vice versa.
working code is as below :
var $selects = $('select');
$('select').change(function () {
$('option:hidden', $selects).each(function () {
var self = this,
toShow = true;
$selects.not($(this).parent()).each(function () {
if (self.value == this.value) toShow = false;
})
if (toShow) $(this).show();
});
if (this.value != 0) //to keep default option available
$selects.not(this).children('option[value=' + this.value + ']').hide();
});
But above code works fine in case we change dropdown item by mouse click however when we use aero keys the issue still persist.

Please Do like Below
var textValue = $("#yourdropdownid option:selected").val();
$("#dropdownElement").find('option[value="'+textValue+'" ]').remove();
This will helps you.

Is this what you want?
http://jsfiddle.net/b5ahtbr5/1/
Here is what you do-
$('.dropdown').on('change',function(){
var selectedValue=$('option:selected',this).val();
$('.dropdown ').not(this).find('option[value='+selectedValue+']').remove();
});

Change event firing without click

I am currently using the isotope plugin to create a function that allows me to place multiple select dropdowns. When the user has selected the dropdowns and when they click submit, it fires the event and rearranges the items.
The problem i am recieving is that the change event is firing and removing everything, but when i click submit, the right results are returned.
Jquery:
jQuery(document).ready(function($) {
var $container = $('.finalblock'),
filters = {},
selector;
$container.isotope({
itemSelector : '.finalchannel',
layoutMode: 'none'
});
$('select').change(function(){
var $this = $(this);
$('#mainSubmission').click(function() {
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter-value');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
var selector = isoFilters.join('');
$container.isotope({ filter: selector });
return false;
});
});
});
Iv been looking into the bind() function but that doesnt seem to be giving me the right thing (maybe cause i must be doing something wrong.
$('select').bind('initCheckboxes change', function() {
// do some stuff including ajax work
}).trigger('initCheckboxes');
EDIT:
JSFIDDLE: http://jsfiddle.net/Lnzkv3v7/

Just looking at your code, (on the website itself, not the jsfiddle):
The first select element has the id of filters
<select id="filters" data-filter-group="mainfilter">
but did you know that was stored as a variable in your js?
var $container = $('.finalblock'),
filters = {},
selector;
Since most of these elements are being pulled in by Isotope anyways, this could be the issue. The reason why this is a theory is because your second select element doesnt seem to be causing an issue. So change the first select id to something else and see if it works.

jQuery animation skipped when clicking quickly

Please take a look at this jsfiddle
If you click on the divs on the top quickly enough, you'll find that eventually two divs end up appearing. I've had this problem with jQuery before as well. I just ended up disabling the buttons (or animation triggers) in that case, but I'm wondering if there is a more elegant solution to this.
Here is my jQuery code -
$(function () {
var _animDuration = 400;
$("#tabLists a").click(function () {
var attrHref = $(this).attr('href');
// Get shown anchor and remove that class -
$('.shownAnchor').removeClass('shownAnchor');
$(this).addClass('shownAnchor');
// first hide currently shown div,
$('.shownDiv').fadeOut(_animDuration, function () {
debugger;
// then remove the shownDiv class, show the clicked div.
$(this).removeClass('shownDiv');
$('#' + attrHref).fadeIn(_animDuration, function () {
// then add that shownDiv class to the div currently being shown.
$(this).addClass('shownDiv');
})
});
return false;
});
});
I'm using callbacks everywhere. I would like a solution that would queue up the animation rather than, not allow me to click

try this code with a check var:
$(function(){
var check = 1;
var _animDuration = 400;
$("#tabLists a").click(function(){
if(check == 1){
check = 0;
var attrHref = $(this).attr('href');
// Get shown anchor and remove that class -
$('.shownAnchor').removeClass('shownAnchor');
$(this).addClass('shownAnchor');
// first hide currently shown div,
$('.shownDiv').fadeOut(_animDuration, function(){
debugger;
// then remove the shownDiv class, show the clicked div.
$(this).removeClass('shownDiv');
$('#' + attrHref).fadeIn(_animDuration, function(){
// then add that shownDiv class to the div currently being shown.
$(this).addClass('shownDiv');
check = 1;
})
});
}
return false;
});
});
DEMO

Removing and Appending in the DOM

I've been at this problem for a while now, and I can't seem to figure it out. I have a checkbox that when checked, deletes a div containing a textbox. When that checkbox is unchecked the aforementioned textbox should return to the page. The removal works, but the append doesn't.
This is what I'm currently working with code wise:
$('#ResultsNoData1').click(function () {
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
if (this.checked) {
parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});
My original design worked by doing the following:
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show();
});
However the functionality I need to recreate is actually removing the data from this textbox from being accessed on the site while hiding the textbox itself at the same time. This doesn't provide that functionality.
Current example

Here you go: http://jsfiddle.net/cx96g/5/
Your issue is that you were trying to set parent inside your click, but once child is removed it would fail.
var parent = document.getElementById('Results1').parentNode;
var child = document.getElementById('Results1');
$('#ResultsNoData1').click(function () {
if (this.checked) {
node = parent.removeChild(child);
}
else {
parent.appendChild(child);
}
});

You need to show and hide that TextBox not remove.
$('#ResultsNoData1').click(function () {
if (this.checked) {
$("#Results1").hide();
}
else {
$("#Results1").show();
}
});
Working example

$('#ResultsNoData1').click(function () {
(this.checked) ? $('#Results1').val('').parent().hide() : $('#Results1').parent().show();
(this.checked) ? $('.results1casual').hide() : $('.results1casual').show();
});
JSFiddle

You are doing it right way but missing one small thing need to remove value from the textbox.
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide() : $('.results1').show().val("");
});
or
$('#ResultsNoData1').click(function () {
(this.checked) ? $('.results1').hide().val("") : $('.results1').show();
});
And this is the right way(show/hide) the textarea.

How to select other checkbox when the last value is checked

Here an example of my checkbox list http://jsfiddle.net/YnM2f/
Let's say I check on G then A,B,C,D,E,F also automatic checked. How can i achieve my goals with jQuery?

First you need to get all the checkboxes based on which one is clicked. for this you need to get the parent nodes, siblings that are before it. Here is some code that will help you get there, but you'll need to work on it to make it work for you.
http://jsfiddle.net/urau8/
$("input:checkbox").on("click",function(){
if(this.checked)
$(this).parent().prevAll().each(function(){
$("input:checkbox",this).attr("checked",true);
});
});

This will check all checkboxes above a checkboxe that gets checked and uncheck all checkboxes above a checkbox that gets unchecked, given the checkbox layout that you've provided.
$('input:checkbox').click(function () {
var state = $(this).prop('checked');
var elements;
if (state) {
elements = $(this).parent().prevAll();
} else {
elements = $(this).parent().nextAll();
}
elements.each(function () {
$('input:checkbox', this).prop('checked',state);
});
});

$('input:checkbox').change(function(){
var $allParents = $(this).parent();
$allParents.prevAll().find('input').attr('checked', 'checked');
$allParents.nextAll().find('input').removeAttr('checked');
});
Try this

Well it's already been done five times, but this is what I did: http://jsfiddle.net/YnM2f/27/
$('input').click(function(){
if( $(this).is(':checked') ){
$(this).parent('p').prevAll().children('input').attr('checked',true)
}
})

Try something like this: http://jsfiddle.net/YnM2f/16/
It's a very specific solution (as in it will only work with "G"), but it should give you an idea for how to customize this code to meet your needs.
$('input:checkbox').filter(function(){
return (/ G/).test($(this).parent().text())
}).on('change', function() {
var gBox = $(this);
$('input:checkbox').prop('checked', $(gBox).prop('checked'));
});