Develop Reference

Prevent multiple select element from automatically sorting the value assigned to it basis the order of the indexes in the options

I am using the select2 plugin to convert a multiple select html element to a more presentable format. Also I don't think my question is very much dependent on the plugin.
What the plugin does internally is -
this.select.val(val);
where this.select points to the hidden multiple select element.
On feeding the function above a val of say - 2,4,0 ,
the value stored as confirmed when I do an alert(this.select.val()) is 0,2,4 , i.e. with automatic unwanted sorting according to the order of the options in the select element.. :/
DEMO - http://jsfiddle.net/rohanxx/DYpU8/ (thanks to Mark)
Is there a way to preserve the sort order after feeding in the value to my select element?
Thanks.

This is a very good question. I think this is more to do with the multiselect html element, rather than select2.
If you have a normal multiselect, there is no "order" sort of speak. You just have a list in the original order, with either each item selected or not.
I'm almost 100% sure there is a better way of doing this than the below, but for a workaround it should do just fine.
End result:
JavaScript code
// 'data' brings the unordered list, while 'val' does not
var data = $('#e1').select2('data');
// Push each item into an array
var finalResult = [];
for( item in $('#e1').select2('data') ) {
finalResult.push(data[item].id);
};
// Display the result with a comma
alert( finalResult.join(',') );
JSFiddle:
http://jsfiddle.net/DYpU8/4/

A little late for an answer but I actually found a way of doing this.
Keep in mine that this method will hide the options that are already selected, because for my use case it looked better, plus it needs to be that way in order the choices to be in the order the user made them.
$('.my-multi-select').select2('Your Options').on("select2:select", function (e) {
$('[data-option-id="' + e.params.data.id + '"]').insertBefore(_this.find('option:not(:selected):eq(0)'));
}).on("select2:open", function () {
_this.append(_this.find('option:not(:selected)').sort(function (a, b) {
return +a.getAttribute('data-sort-order') - +b.getAttribute('data-sort-order');
}));
});
And for the styles
.select2-results__option[aria-selected=true]{
display:none !important;
}
You will want to make sure you know how the jQuery .sort() function works for you to be able to modify this for your own needs.
Basically what this is doing is when you select an option, it gets hidden and then placed at the bottom of the other selected options, which are before the unselected options. And when you open the drop down, it sorts all of the unselected options by their pre-determined sort order.

How to get values of 2 sides of jquery multiselect2side

Here's the jsfiddle for the code http://jsfiddle.net/VFskn/2/
The jquery multiselect2side has 2 parts for the list say the Available and Selected
a.To get the values of Selected portion of the I used the following code:
var multipleValues = $("#columnList").val() || [];
b. To get all values of the list I can use:
$('#columnList option').each(function() {
columns.push( $(this).attr('value') );
});
My Question is how I can obtain the Available portion of the list

If I understand your question right, you want to get the value of every option that is in the select under Available?
In the given example this select has the id "columnListms2side__sx", so that you can get the values of its options with
var multipleValues = [];
$("#columnListms2side__sx option").each(function()
{
multipleValues.push($(this).val())
});
here's the updated fiddle: http://jsfiddle.net/VFskn/3/
!important notes though: its not a good idea to mess with it, other then the functions provided by the plugin.
And I'm not sure how safe it is too assume that this select will allways get this id (e.g. if you have multiple of them in one page). It might be smarter to, build a more generic select. (the plugin seems to create a div container after the select it replaces, you want to get the first select in there)
EDIT:
this would be more generic, but less efficient:
$("#columnList").next().find("select").filter(":first").children().each(function(){...}
updated fiddle: http://jsfiddle.net/VFskn/4/

Use jQuery to set select box value to first option

I am dynamically populating a select box with options. When I do this, I want the value of the select box to be the value of the first option (a 'default option', if you like). Sounds really simple, but I just can't get it to work.
var myElement = $('select[name="myName"]');
.... tried the following three variations
// myElement.find('option').first().prop('selected', 'selected');
// myElement.val(myElement.find('options').first().val());
myElement.prop('selectedIndex', 0);
...but the following line gives a blank alert
alert(myElement.val());
Where am I going wrong?

options should be option
myElement.find('option:eq(0)').prop('selected', true);
You can use the eq selector on the option to select the first option.
If you know the value of the first option. Then you could simply do
myElemeent.val('first value') // Which selects the option by default
The 2nd case you tried should work, unless you are not calling at the right point . i.e; waiting for the ajax response to be completed.
Try calling that inside the done or the success (deprecated) handler

You almost got it, drop the 's' in 'options':
myElement.val(myElement.find('option').first().val());
Working jsFiddle

You could also use next code:
myElement[0].selectedIndex = 0;
This get's the Dom element (not jQuery object), works with vanilla Javascript and uses it to set the first option as the selected one based on it's index.

If you want to be sure that your option has a value and is not a placeholder you can do:
$('select option').filter( function (index, option) {
return option.attributes.value
}).val()
That way you'll check if the HTML node has attribute value and is not empty.

How to create dynamic select field with blank option and unfiltered state

I need to create a dynamic select field in Rails 3.2, where the options available in the second fields (states) depends on the value of the first (country). I've referred to the revised version of this Railscast, and am using the following code:
jQuery ->
$('#person_state_id').parent().hide()
states = $('#person_state_id').html()
$('#person_country_id').change ->
country = $('#person_country_id :selected').text()
escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/#])/g, '\\$1')
options = $(states).filter("optgroup[label='#{escaped_country}']").html()
if options
$('#person_state_id').html(options)
$('#person_state_id').parent().show()
else
$('#person_state_id').empty()
$('#person_state_id').parent().hide()
I need to make two changes to this code, which I think should be pretty straightforward for someone with stronger javascript skills than I have.
In the filtered list, I need to include a blank option. Currently selecting a country results in the first state state in the filetred list being selected. I need to leave the prompt "please select". How can I do this?
EDIT
SMathew's suggestions helped here. I'm using $('#person_state_id').html(options).prepend('<option></option>') which, together with a prompt attribute on the html tag, acheives the required result.
If no country is selected (ie the else statement) person_state_id should contain a complete, unfiltered list of all states. I've tried:
else
$('#person_state_id').html(states)
But this is not behaving as expected. I'm having these issues.
If I select a country that has associated state records, #person_state_id options are correctly filtered (and with smathews suggestion, a prompt is included).
If I select a country with no associated state records, #person_state_id contains all states, a blank option in the markup, but the first state option is selected by default. (It should be empty, with a blank option selected by default and a prompt displayed).
If I clear the selection in #person_country_id, #person_state_id contains an unfiltered list of all states (correct), and an empty option in the markup (correct) but the first state record is selected by default (should be a prompt).
How can I resolve these issues?
Thanks

Try
...
if (options) {
$('#person_state_id').html(options).prepend('<option>Please select</option>').parent().show()
} else {
$('#person_state_id').html(states).prepend('<option>Please select a state</option>').parent().show()
}

To deal with my second problem, I added the following coffeescript
jQuery ->
resetCountry = ->
$('#person_state_id').select2 "val", "0"
$('#person_country_id').bind("change", resetCountry);
This, coupled with smathew's answer, seems to be working
(I'm using select2 to format my select fields. You'll need a different approach to set the value if not using select2)

jQuery: Selecting option elements by their value

I'd like to remove a specific option from some select boxes (all with the same values) if their value is "1". The problem is, I'm having difficulty filtering elements down to that specific value.
At the moment, the closest I've got is
$('.demoClass').find('option:contains(1)').remove();
but there are two problems. Firstly, this seems to iterate over the (displayed) contents of the option, not its value...and secondly, it seems to return true the contents contain that value, as opposed to being that value. (Eg contains(1) will return true for (1, 10, 11, 12)...when I want it to return true for "1" only)
In short, what I'm looking to do is find the timeslot option with value X inside all select boxes of class ".demoClass" and remove them. Any suggestions appreciated.

Try this...
$('.demoClass').find('option[value="1"]').remove();
This utilizes the Attribute Equals Selector

Try this:
$('.demoClass').find('option[value=1]').remove();