Get select2 selected items using data to prevent sorting - javascript

I've doing some research about a problem I'm having with jQuery select2 plugin. The select2 sorts the selected items (no matter which order you choose them) when posting form. I know it may not be a select2 specific bug, but standard html select behaviour.
Now, how could I get the selected items IDs and then put them in a comma separated list in a hidden input so I can respect the order the items were chosen?
$("#formpacint").submit(function (event) {
var data = $('#campoprofesionales').select2('data');
$('#hidprofesionales').val(data);
});
The above code puts the selected items (in the order they were chosen) using its data property, into the hidden input, but the console.log shows them as objects (text+id I guess)..
I'd need to have: 35,14,29 (the ids of selected items as they were selected without sorting)
Thanks

Found a solution
var selections = (JSON.stringify($("#campoprofesionales").select2('data')));
var obj = $.parseJSON(selections);
$.each(obj, function() {
console.log(this.id);
// I here set a hidden field with the ids in the order they were selected
});

Related

Preselecting options of multiple selectbox, using Materialize css FW doesn't work

I'm using materialize css framework. When I'm printing multiple selectbox (<select multiple>...), preselected options (<option selected...>) won't render.
Browser however understand that some options are preselected, so they are send again, when the form is submited. Also because of the rendering issue i'm unable to manipulate with preselected options or select new ones.
Normal Selectbox works just fine.
You can add onchange event to field and reset the values by accessing all the (li) children. If you see carefully. Multi select uses UL and a text field for value storing and keeps class "Active" for li. And append this code after .material select since check boxes are initialized after that
you can try following in
function change_materialize_multiple_Select(id_of_select)
{
var newValuesArr = [],
select = $(id_of_select),
ul = select.prev();
ul.children('li').toArray().forEach(function (li, i) {
if ($(li).hasClass('active')) {
newValuesArr.push(select.children('option').toArray()[i].value);
}
});
select.val(newValuesArr);
}

Update Scope by selecting checkboxes

I have two tables that I want to filter by either using an individual select dropdown in the table row or by selecting multiple checkboxes and bulk updating the scope.
A user should be able to check the records, select the top dropdown status, and then the scope gets updated. If the status is greater than or equal to 1 it goes in one table, if less then it goes in the other table.
Fiddle http://jsfiddle.net/TheFiddler/hxz06sd7/
How can I use the checkboxes to update the checked values based upon selected value?
The select
<select ng-options="item.value as item.displayName for item in StatusDropDown" ng-model="person.status" ng-change="updateSelected()"></select>
updatedSelected should take the checked rows and filter:
$scope.updateSelected = function(statusarg){
//how to set status for selected and update tables
}
Associate ng-model (person.selected) to the checkboxes and on-change, filter them out based on the selected property, and apply the value to them.
$scope.updateSelected = function (statusarg) {
//how to set status for selected and update tables
angular.forEach($scope.people, function(person){
person.selected && (person.status = statusarg);
});
}
Fiddle
Earlier issues with your code was that: You should not use track by with select as syntax they are not meant to work together. You would rarely need to use track by with ng-options. Read this for more details.

getajaxdata for multiple values

based on the answer of this question. which is about using the getajaxdata from a select list to get a variable. i want to use another select list so i'll have 2 different select list with 2 different values. id=list1 and id=list2. what is the correct syntax for this code
//on changing select option
$('#list').change(function(){
var val = $('#list').val();
getAjaxData(val);
});
to make it getting the two value from the two dropdown lists (list1 and list2). thank you

select items in kendo list view via jQuery

I have a kendo list view to display candidate information, I need to select candidate items in the list view on data bound event based on a Boolean property "IsPerfectMatch" in the data item. The code is as below:
function onDataBound(){
var lisView = this;
$.each($("#dupCheckList").data("kendoListView").dataSource.data(),
function(index, item){
if(item.IsPerfectMatch){
listView.select(this);
}
});
}
When I debugged, I can see things working until the if block that checks "item.IsPerfectMatch" but the line of code "listView.select(this);" is not selecting the list item.
Please suggest where could I be going wrong.
Also, I have set the list view selection mode to multiple for this list view. I would want to disallow selection of only the first item in the list. In other words, apart from the first item in the list view, all other items are selectable. Please suggest with sample jQuery code on how to achieve it.
Thanks and regards,
Damodar
ListView items are NOT the DataSource entries, so the value you're sending to the select() method is invalid. To iterate over the viewable children you will have to use the element.children() call.
var listView = this;
$.each(this.element.children(), function(index, item) {
if (listView.dataSource.getByUid(item.dataset.uid).IsPerfectMatch) {
listView.select(item);
}
}

Reading multiple SELECT values with JavaScript/jQuery

I understand that SELECT multiple will let a viewer select multiple items in a dropdown list and then the form submission passes all the selected items. But how does this work in JavaScript when there is no form submission and you're just watching for a select change:
$('#delete_dropdown').change(function(e){
and then looking at $(e.target).val() for the selected values?
Thanks
You can look at this context inside your handler and val() will return the array of elements, with jquery you can do this:
$('#delete_dropdown').change(function(e){
var selectedArray = $(this).val(); //Array of selected values
});
Fiddle
If you are going with vanilla javascript you will need to loop through the options to check which all are selected and add them to suit yourself.

Categories