Reading multiple SELECT values with JavaScript/jQuery - javascript

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.

Related

jquery-select2 send values to server as CSV string

Is it possible to send as one CSV-string all selected values in HTML select element with multiple="multiple" using jquery-select2 library?
I had a similar requirement and could not find any options to accomplish this directly through the Select2 plugin. However, it was easy enough to create a separate input element and synch it on the select's change event.
var $options = $('select#options'),
$optionscsv = $('input#optionscsv');
$options.select2()
.on('change', function() {
$optionscsv.val($options.val());
});
Here's a live example on codepen: http://codepen.io/anon/pen/gpLbLG

jquery clone and select/select2 selected values on jquery cloned elements getting lost

I'm currently in trouble with a select/select2 and jQuery $.clone issue.
In a html form with html select boxes replaced with select2 but the select2 jQuery plugin is not really relevant for this issue.
I experience problems when I use jQuery $.clone(true, true) to get a copy of a form to work on it.
When I try the following:
window.clone = $('#formSelector').clone(true,true);
The selected values are cloned and get lost. See http://jsfiddle.net/straeger/ct31f34c/9/
Even If I try to remove select2 with the call the cloned select boxes do not hold the selected values.
$('select').select2('destroy');
window.clone = $('#formSelector').clone(true,true);
see: http://jsfiddle.net/straeger/dokenyss/1/
A small hack with a big drawback (if no ID is present) is to copy the selected values to the clone:
$clone.find('select')
.each(function(index, value){
var $el = $(value);
$el.val($element.find('#'+$el.attr('id')).val());
});
see: http://jsfiddle.net/straeger/ct31f34c/10/
My question is what would be the correct way to handle such a problem ?
Does anyone know a way to select the counterpart of the original element from the original jQuery element if I have no ID?
Or a way to persist the currently selected option ? via the attribute e.g.
<option value="c" selected>C Value</selected>

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

Get select2 selected items using data to prevent sorting

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

Using data attributes to filter a select box (using third party JS filtering code)

I am using this relatively simple JS program:
http://www.barelyfitz.com/webdesign/articles/filterlist/
The program just filters a select box using a text box.
However, I want to jquery and HTML5 data attribute which is different how it was originally used. I give my text box filterer a data attribute:
<input id="filter_text" name="filter_text" data-filterable="myselect"
type="text" />
I use the following jquery to get the name of the select box that is to be filtered and then filter the select box:
$(function() {
$('input[data-filterable]').keyup(function() {
select_box_name = $($(this).data('filterable'))[0];
filter = new filterlist(select_box_name);
filter.set(this.value);
});
});
which NEARLY works. You can filter but if you press backspace to de-filter then nothing happens i.e. it doesn't 'unfilter'.
It must be something really small!!
Thank you :).
You need to initialize the filter outside the event handler:
$(function() {
$("input['data-filterable']").each(function() {
var filter = new filterlist($($(this).data('filterable'))[0]);
$(this).keyup(function() {
filter.set(this.value);
);
});
});
On every keyup you're reinitializing filter. So you can only filter on the select as it is right when you press a key. Move the initialization of the filter out of the keyup event and it's working.
Here's a fiddle.

Categories