Develop Reference

Item is moving on mouse click in bootstrap-duallistbox

I have taken the customized plugin which gives the feature for optgroup which is given over here Add scroll position return on select1. Add optgroup capability
Customized bootstrap-duallistbox (with optgroup feature)
I have created a sample example in plunker which shows a running example. The option group is working fine but the issue is that even through when I put move-on-select="false" still Item is moving on mouse click.
Can anyone please tell me why this is behaving like that
Working Plunker
<select ng-model="modal.selectedItems"
ng-options="item.name group by item.app for item in modal.allItems"
multiple
bs-duallistbox
move-on-select=false
></select>

Honestly, the easiest solution is just to change the implementation of selectGroup. I think it should be this:
function selectGroup(e) {
if(e.data.dlb.settings.moveOnSelect) {
move(e.data.dlb);
}
e.preventDefault();
}
You'll probably want to make a similar change to unselectGroup. The current implementation has strange behavior, where it moves things that aren't selected since it never unselects anything properly.
Edit:
The way that selections are made is faulty. I have no idea of the author's intent, but I suspect this implementation is closer to what a user would expect:
function selectGroup(e) {
if (e.target.tagName != 'OPTGROUP') return;
$(this).find('option').each(function (index, item) {
var $item = $(item);
if (!$item.data('filtered1')) {
if (!$item.prop('selected')) {
$item.prop('selected', true);
} else {
$item.removeAttr('selected');
}
}
});
if(e.data.dlb.settings.moveOnSelect) {
move(e.data.dlb);
}
e.preventDefault();
}
Again, make a similar change to unselectGroup. In the original code, the problem was that when you click on an individual option, the click would bubble up to the optgroup, hence the if guard. Also, the selection state should not be changed directly. That is already handled in the move function. It's much nicer to change the selected attribute, which the the move function later digests. In this way, it's also visually clear what is actually being selected. Thus, when you click an optgroup, it should toggle selected on each the item properties. You may want to modify how the removal of selected attribute is done.

Go with
http://www.virtuosoft.eu/code/bootstrap-duallistbox/
as #prakash Said in Commments.

Multiple select - value of deselect returns null

Description
I am using a jquery plugin chosen which pretty much does something like this:
This lets me add each option one by one or remove each option one by one. For every option selected, I create a new element with the selected option's value as the id.
Problem
The problem is when I remove an option from the list. For example:
$('#multiple-select').on('change', function(e){
alert($(e.target).val());
});
Will return the correct value if an option is added, however it returns null if we remove an option. I need to be able to get the value of the option being deselected so I can remove it in the other element.
Question
How can I get the deselected option's value to return the actual value instead of null? Or is there another way to bypass this problem?
All I need to be able to do is find the option being deselected and removing it from the other element (knowing that the element's id is built on the option's value).
Update
Remove code as requested:
$('body').on('change', benefs, function(e){
var $nbparts = $(participantNbParts),
$target = $(e.target),
$val = $target.val(),
$name = $target.text();
if($val == null){
//this is because we deleted something thus we need to remove it from $nbparts which is a pitty since we don't know what it was before it got deleted
}else{
//someone was added
$(create_row_expense_nb_parts_participant($name, $val)).appendTo($nbparts).show('slow');
$nbparts.parent().show('fast');
}
});

jQuery chosen provides selected and deselected using which you can identify selected and deselected values respectively, like:
$("#your_element_id").on('change', function (evt, params) {
var selected = params.selected;
var removed = params.deselected; //gives you the deselected value
//assuming your option ids are numbers
if( removed > 0 ) {
console.log( "Value removed is:" + removed );
}
});

From its documentation in the change event description you have
Chosen triggers the standard DOM event whenever a selection is made
(it also sends a selected or deselected parameter that tells you which
option was changed).
This suggests you should observe the arguments received by the event handler at run time to get a hint about (and most likely a reference to) the removed/deselected option.

jquery change previous content

When i change a province in my select list, a new list gets updated with new checkboxes.
Now when the change occurs i want .change() added to those new checkboxes (its for when parent gets selected, chillds should be selected). But when i log the object, i see i got the items from the previous list and not from the current.
Its seems like the change function still works with the previous values in the list, but not with the new updated ones. I can't figure out how to get the current items from the list. Someone an idea?
$('.select-province').change(function() {
//I log the previous list, but need the current updated one
var test = $(this).parent().contents();
console.log(test);
//Not really important for understanding the problem
$("input[type='checkbox']").change(function () {
//alert('test');
console.log($(this));
$(this).parent().siblings('ul')
.find("input[type='checkbox']")
.prop('checked', this.checked);
});
});

Try:
.live('change',function() {
This if you are using jQuery above version 1.7 :
$(document).on('change','.select-province', function() {

jQuery - Get the value of unselected item in multiselect

Although this may sound dead simple, the matter is complicated by the fact I can only use the change() trigger on the select element. I am using the 'Chosen' jQuery plugin which basically modifies the multi select box on the page.
Whenever a item is selected or unselected, the plugin triggers the change event on the original select element. I am obviously able to get all the unselected items, but I need the one that was just unselected that caused the change event to trigger.
So I have the following function, the bit in the middle is what I need to capture the item that was just unselected. #cho is the id of the original select element.
$("#cho").chosen().change( function() {
// Need code here to capture what item was just unselected, if any...
})

Store value when the user changes the the check box.
var preVal;
$("input[name='g']").on("change",function(e){
if(preVal){
alert(preVal);
}
preVal=$(this).val();
});
Check this http://jsfiddle.net/fcpfm/

1.Use hidden field
2.Hidden field value initially empty.
3.Onchange put the selected value in a hidden field.
4.If onchange is happening again , hidden field value is the previously selected value.
$("#cho").chosen().change( function() {
var hidvalue = $('#hiddenfield').val();
if (hidvalue ) {
//Get the previously selected ids
var prev_ids = $('#hiddenfield').val();
//Then Update currently selected ids
$('#hiddenfield').val('currently selected ids');
} else {
//Update currently selected ids
$('#hiddenfield').val('currently selected ids');
}
})

Try using a variable to store the selected item. Update it each time when item changed. I cant add comment. That is why I am posting it as an answer.

Is it possible to bind select option On select and not On change

i am trying to bind an event when user selected an item from <select>
not necessary changed from the default.
$(select).change(); only works if the item was changed.
i wonder if there is something that works by selecting one of the options even if its the same default option.
$('#page_body').on('select', '.pop_pin_select', function() {
});
This is what i try so far but it wont work.

There is a way around this; making the option at index 0 the default selected, dynamic and not manually selectable (i.e. disabled) and listen for onchange as normal, except when changing to index 0. Then onchange, set .options[0] to chosen label and value and change selection to it. Here is an example.
Relevant JavaScript from example
document.getElementById('sel')
.addEventListener('change', function () {
if (this.selectedIndex === 0) return;
this.options[0].value = this.value;
this.options[0].textContent = this.options[this.selectedIndex].textContent;
this.selectedIndex = 0;
}, false);​
onchange will fire when a user makes the same selection because the index is changing even though the value isn't.