I have 2 select box where I'm trying to avoid duplicated values (options) in those select box's.
they all start with the same options list but after selecting option in selectA this option wont bee seen in selectB and vice versa.
It should work if you select on selectA-selectB-selectA... etc.
Every time one of the select box should be with n-1 options.
I did the next this.. it works but in mobile device the .hide() it's not working!
$('#selectA').bind('change', function () {
$("#selectB option").show();
$("#selectB option[value='" + $(this + 'option:selected').attr('value') + "']").hide();
});
$('#selectB').bind('change', function () {
$("#selectA option").show();
alert($(this).find('option:selected').attr('value'));
$("#selectA option[value='" + $(this).find('option:selected').attr('value') + "']").hide();
});
}
Tried with class : .hide()
.hide {display: none;}
$('#selectA').bind('change', function () {
$("#selectB option").removeClass('hide');
$("#selectB option[value='" + $(this + 'option:selected').attr('value') + "']").addClass('hide');
});
$('#selectB').bind('change', function () {
$("#selectA option").removeClass('hide');
$("#selectA option[value='" + $(this).find('option:selected').attr('value') + "']").addClass('hide');
});
}
also dont work.
tried this:
$('#selectA').on('change', function() {
$('option:not(:selected)', this).clone().appendTo($('#selectB').empty());
});
$('#selectB').on('change', function() {
$('option:not(:selected)', this).clone().appendTo($('#selectA').empty());
});
but the problem here is if we start with 5 options for example then after selecting option in selectA I'll get n-1 in selectB,after selecting option in
selectB I'll get n-2 in selectA and so on... in the end you get empty list.
any ideas how to fix it?
Try this: fiddle
$(document).ready(function() {
$('#selectA').on('change', function() { UpdateDropdown($(this), $('#selectB')); })
$('#selectB').on('change', function() { UpdateDropdown($(this), $('#selectA')); })
function UpdateDropdown($source, $target) {
var $sourceitems = $('option:not(:selected)', $source).clone();
var sourcevalues = $.map($sourceitems, function(option) { return option.value; });
var $targetitem = $target.find(':selected');
if ($.inArray($targetitem.val(), sourcevalues) == -1) {
$sourceitems = $.merge($sourceitems, $targetitem);
}
$sourceitems.appendTo($target.empty());
}
});
If keeping sort order is important fiddle with sort
Related
I am currently using Footables to display tabular data. Each row has a checkbox. There is one master checkbox that selects all. I am running into some difficulties. The table has a filter. When I apply the filter and try to check all checkboxes within that filter it wont work. Also, since I am able to check all checkboxes at once is there away to uncheck all checkboxes? EXAMPLE
Checkbox function
$(document).on('change','input[name="check_all"]',function() {
$("input[type=checkbox]").attr('checked', true);
});
$(document).on('change','select',function() {
$('input[type=checkbox]').attr('checked', false);
});
table filter
$(function () {
$('table').footable().bind({
'footable_filtering': function (e) {
var selected = $('.filter-status').find(':selected').text();
if (selected && selected.length > 0) {
e.filter += (e.filter && e.filter.length > 0) ? ' ' + selected : selected;
e.clear = !e.filter;
}
},
'footable_filtered': function() {
var count = $('table.demo tbody tr:not(.footable-filtered)').length;
$('.row-count').html(count + ' rows found');
}
});
$('.clear-filter').click(function (e) {
e.preventDefault();
$('.filter-status').val('');
$('table.demo').trigger('footable_clear_filter');
$('.row-count').html('');
});
$('.filter-status').change(function (e) {
e.preventDefault();
$('table.demo').data('footable-filter').filter( $('#filter').val() );
});
});
use .prop() instead of .attr()
Check/uncheck only the visible rows
set the checked status to the select all checkboxes state
Try
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:visible input[type=checkbox]").prop('checked', this.checked);
});
try this one with not selecter which will select except the class .footable -filtered
$(document).on('change', 'input[name="check_all"]', function () {
$(".footable tr:not(.footable-filtered) input[type=checkbox]").prop('checked', this.checked);
});
i want a neat solution to handle event for a drop down menu , so that when user opens the select menu , it alerts opened , and when he closes it , it alerts closed , neglecting wheather the selected value is changed or not.
<select id="dummy">
<option>dummy1</option>
<option>dummy2</option>
<option>dummy3</option>
</select>
what i want is something like
$("#dummy").on('open',function(){//do something})
$("#dummy").on('close',function(){//do something})
something like heapbox
http://www.bartos.me/heapbox/
and this solution is not acceptable : Run change event for select even when same option is reselected
the typical approach to extending the native functionality of a select box is to replace it with styleable markup and then tie the values of the new markup back into the origninal (now hidden) select element. (NOTE: I've not included any styles. This is a bare-bones example of using a select replacement).
var SelectBox = {
init: function () {
if ($('select').length > 0) {
this.generateStyledSelectbox('custom-select');
};
},
generateStyledSelectbox: function (cssClass) {
// Contained within .each to isolate all instances of <select>
$('select').each(function(index) {
var $source = $(this),
selected = $source.find("option[selected]"),
options = $source.find('option'),
selindex = index;
// Append styleable pseudo-select element to doc
$source.after('<div id="result-' + index + '" class="' + cssClass + '"></div>');
// Construct select list in pseudo select element
$('#result-' + index).append('<dl id="activeValue-' + index + '" class="dropdown"></dl>');
$('#activeValue-' + index).append('<dt>' + selected.text() + '<span class="value">' + selected.val() + '</span></dt>');
$('#activeValue-' + index).append('<dd><ul></ul></dd>');
// Assign select values to pseudo-select lis items
options.each(function () {
$('#activeValue-'+ index + ' dd ul').append('<li class="select-menu-item">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></li>');
});
$('.dropdown').each(function(index) {
$(this).find('dd ul li a').on('click', function(event) {
event.preventDefault();
var text = $(this).not('.value').html(),
$base = $('.custom-selectbox').eq(index);
$('.dropdown').eq(index).find('dt a').html(text);
$('.dropdown').eq(index).find('dd ul').hide();
$base.val($(this).find('span.value').html());
});
});
// prevent link actions in dropdown
$('.dropdown dt a').on('click', function (event) {
event.preventDefault();
});
// open/close
$(".dropdown").eq(index).find('dt a').on('click', function () {
$(".dropdown").eq(index).find('dd ul').toggle();
});
$(".dropdown").eq(index).find('dd ul li a').on('click', function () {
var text = $(this).html(),
newval = $(this).find('.value').html();
$(".dropdown").eq(index).find('dt a span').html(text);
$('select').eq(index).val(newval);
$(".dropdown").eq(index).find('dd ul').hide();
});
// Hide dropdown on outside click
$(document).on('click', function (e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) {
$(".dropdown").eq(index).find('dd ul').hide();
}
// remove dropdown-open targetable class
if (!$clicked.parents().hasClass("dropdown-open")) {
$clicked.parents().removeClass('dropdown-open');
}
});
// Hide native select
$source.css('display', 'none');
// assign initial (default) value
var initialval = $source.find('option').eq(0).html();
$('#activeValue-'+index+' dt a').html(initialval);
}); // END .each
}
};
SelectBox.init();
Here's a fiddle http://jsfiddle.net/P6ZCn/ (again, without styles)
I have 2 multi select boxes like as in this link. http://jsfiddle.net/bdMAF/38/
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
But When i add from one first select box to second select box it is working fine for
me.But again when i add from second select box to first select box they are appending to
last of first select box.But what i want is i need to add they must be added in the place
where they deleted.
Thanks in advance...
Maybe you can simply set and remove the attribute "disabled" but it will leave a blank space in the options. Note that with this method you will need to clone the option the first time.
The other solution whould be to add the content as usual but applying a sort() function before
function byValue(a, b) {
return a.value > b.value ? 1 : -1;
};
function rearrangeList(list) {
$(list).find("option").sort(byValue).appendTo(list);
}
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
rearrangeList("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
rearrangeList("#list1");
});
});
});
You can try at this fiddle
You need to keep track of some sort of index, I think in your case you can use the value of each option. (but you could use a dedicated data-* attribute if you need to)
With that value you can then search the current list and see where it should fit in. Loop the options and check for a value greater than the one you are moving. If you find one then insert it before that, if you don't fine one then insert at the end.
This should do it:
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
var item = $(this).remove();
var match = null;
$("#list1").find("option").each(function(){
if($(this).attr("value") > item.attr("value")){
match = $(this);
return false;
}
});
if(match)
item.insertBefore(match);
else
$("#list1").append(item);
});
});
You can apply the same for the reverse too.
Here is a working example
After adding the options back to #list1, a simple sort() will do the rest. For that we need to add a comparison function to it based on its value.
$(function () {
$("#button1").click(function () {
$("#list1 > option:selected").each(function () {
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function () {
$("#list2 > option:selected").each(function () {
$(this).remove().appendTo("#list1");
var opts = $('#list1 option').get();
$('#list1 ').html(opts.sort(optionSort));
});
});
function optionSort(a, b) {
return $(a).val() > $(b).val();
}
});
Check out this JSFiddle
You can also sort using text() instead of val() by changing it in the optionSort().
My following code works fine if any row is clicked:
$(document).ready(function() {
$('#currentloc_table tr').click(function(event) {
$("#"+$(this).attr('id')+" input:checkbox")[0].checked = ! ($("#"+$(this).attr('id')+" input:checkbox")[0].checked);
if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if($("#"+$(this).attr('id')+" input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
});
Here is the CSS:
.selected td {
background: yellow;
}
What I need that on page load, first row of this table should get highlighted. How can i do that?
Try this
$(document).ready(function () {
$('#currentloc_table tr').click(function (event) {
$("#" + $(this).attr('id') + " input:checkbox")[0].checked = !($("#" + $(this).attr('id') + " input:checkbox")[0].checked);
if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == true)
$(this).addClass('selected');
else if ($("#" + $(this).attr('id') + " input:checkbox")[0].checked == false)
$(this).removeClass('selected');
});
// Add these lines
var firstTr = $('#currentloc_table tr:first');
firstTr.addClass('selected');
firstTr.find("input:checkbox")[0].checked = true;
});
working demo
You can try this use .first() or :first() to select the target:
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected');
....
or:
$(document).ready(function() {
$('#currentloc_table tr:first').addClass('selected');
....
You can though take a look at these:
.eq() and :eq()
nth-child()
:first-child
read documentation
Trigger the function after load
$('#currentloc_table tr:first-child').trigger('click');
For this to work you should add this after binding click event with:
#currentloc_table tr
Seems like your code could be improved sligtly:
$('#currentloc_table tr').click(function (event) {
var check = $("input:checkbox", this)[0];
check.checked = !check.checked;
$(this)[check.checked ? 'addClass' : 'removeClass']('selected');
});
To select the first row:
$('#currentloc_table tr:first').click();
$(document).ready(function () { $('#currentloc_table').find('tr:first').addClass('selected');});
Try this ,
$(document).ready(function() {
$('#currentloc_table tr').first().addClass('selected_f');
// rest of your stuff ....
And css
.selected_f {
background: yellow;
}
Your CSS class taking as default for selected class, so its not adding that class , and not able to see the effect
Try with this
$(document).ready(function(){
$("#currentloc_table tr:first"):css('background','yellow');
})
or else try with
$("#currentloc_table tr").eq(0):css('background','yellow');
Here is my piece of code in jquery actuall I want in such way where :
Where by default value of Ball will be shown in Textbox.
same time either All or Stopall will be work(it's not working here properly :( )
For multiple times checking All button,which is not working according to the expectation
here is the fiddle link : http://jsfiddle.net/bigzer0/PKRVR/11/
$(document).ready(function() {
$('.check').click(function(){
$("#policyName").val('Start');
$("#features").val('');
$('[name="startall"]').on('click', function() {
var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
if (this.checked) {
$checkboxes.prop({
checked: true,
disabled: true
});
}
else{
$checkboxes.prop({
checked: false
});
}
});
$(".check").each(function(){
if($(this).prop('checked')){
$("#policyName").val($("#policyName").val() + $(this).val());
$("#features").val($("#features").val() + $(this).data('name'));
}
});
});
});
Any comments on this context will be welcome
You're code is broken in many ways. You are binding a click event inside a click event. You should take that outside and just make sure it's inside the document.ready function since your element is a static element.
$(document).ready(function() {
// cache features
var $features = $('#features');
// cache policyname
var $policy = $("#policyName");
// cache all/stopall
var $ss = $('[name="startall"],[name="stopall"]');
// cache all others
var $checkboxes = $('input[type="checkbox"]').not($ss);
// function to update text boxes
function updateText() {
var policyName = 'Start';
var features = '';
// LOOP THROUGH CHECKED INPUTS - Only if 1 or more of the 3 are checked
$checkboxes.filter(':checked').each(function(i, v) {
policyName += $(v).val();
features += $(v).data('name');
});
// update textboxes
$policy.val(policyName);
$features.val(features);
}
$checkboxes.on('change', function() {
updateText();
// check startall if all three boxes are checked
$('input[name="startall"]').prop('checked', $checkboxes.filter(':checked').length == 3);
});
$('input[name="startall"]').on('change', function() {
$checkboxes.prop({
'checked': this.checked,
'disabled': false
});
updateText();
});
$('input[name="stopall"]').on('change', function() {
$checkboxes.add('[name="startall"]').prop({
'checked': false,
'disabled': this.checked
});
updateText();
});
// updatetext on page load
updateText();
});
FIDDLE
you are checking click function in click function. you should use if statement.