JQuery select2 multiple options to be selected via jquery - ruby-on-rails

I have a select2 box with multiple property in rails i want to add an option in a to this box with a selected state when i call a particular javascript. How do I achieve this?
function handleAddSoftwareVersion(button){
$("#device_versions").append($('<option>', {
value:1,
text: 'MyOption'
}));
}
How do i add that selected property to the select box. I can get the select2 to show the value as an option but how do i make it selected?

Related

Hide/Remove and Show/Restore options in a Select2 dropdown box

I have an issue where I need to hide or remove options from a select2 dropdown when selected. These selections fill a list. I would rather not remove the option because if the user removes it from the freshly populated list then it should return to the dropdown with its place in the order restored. I've tried the following:
.select2-results .select2-disabled, .select2-results__option[aria-disabled=true] {
display: none;
}
$('#optionId').prop('disabled', true);
With the prop being set in the jQuery change block. I just can't get this piece.
I have figured it out. If the disable is wrapped like so:
$(#selectId).select2('destroy');
$(#optionId).prop('disabled', true);
$(#selectId).select2();
then the disabled setting will be honored by select2 and the the display none will make the item disappear. To make it reappear, just follow the same steps with the disabled property set to 'false'.

Need to create select2 drop-down when click on text box

i have a requirement that when i click on input type text box then select2 drop-down will automatically upon textbox and another text box will be automatically created down the select2 drop-down.
Maybe below link useful for you example
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
Also visit url for see all examples select 2 examples

Select2 change container position

How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website
http://www.jobnisit.com/en
It look cleaner in terms of UI in my opinion.
Ps. sorry, I can't post the image now.
There is 2 ways to do this.
1) With css:
.select2-dropdown--below {
top: -2.8rem; /*your input height*/
}
This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.
2) With js:
$('select').select2().on('select2:open', function() {
var container = .$('.select2-container').last();
/*Add some css-class to container or reposition it*/
});
This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.
Tested with select2 4.0.0
The proper way of positioning the dropdown is using the core feature provided by select2 plugin.
It provides us with 'dropdownParent' property to place to dropdown inside the particular element
select field: #edit-field-job-skillsets-tid
parent item: div.form-item-field-job-skillsets-tid
jQuery("#edit-field-job-skillsets-tid").select2(
{dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
);

jQuery Mobile - Disable multiple select menu label changes - count bubble

When using a selection menu with the option for multiple select, jquery changes the menu's label based on the selected elements.
http://jquerymobile.com/demos/1.1.0/docs/forms/selects/custom.html
See this fiddle. When user selects shipping options, the selected elements show in the menu's label.
http://jsfiddle.net/VEYjV/3/
How can I disable this feature and force the menu to keep the label I've associated with it (i.e. Choose options)? How can I disable the count bubble feature?
I figured out how to disable these features by hacking into the jquery.mobile lib.
I disabled the setButtonText and setButtonCount funcions when called from the refresh
refresh: function() {
//this.setButtonText();
//this.setButtonCount();
},

How to create Combobox with multiselect capability?

How to create a Combobox having Multiselect Capability using Jquery?
Does JQuery Combobox has this functionality or Property?
if it helps, take a look http://ivaynberg.github.io/select2/ for multi select values
Edited : I found one more link it's really great http://tameraydin.github.io/jquery-easyselect/
Combobox displays the selected value when its list of options is collapsed. You may want to use multiple selection list.
to use multiple select in combobox you will have to create your own user control using checked listbox, textbox and a button.
and on click of button just make checked list box visible and let the user select items from that checkedListBox and as user select items on it you take those values and concatenate it in textbox with comma seperated. and then again on click on button hide that list box.
as it is on : http://9perhour.co.uk/
which is asking for select technology
some good samples
for jquery:
http://abeautifulsite.net/blog/2008/04/jquery-multiselect/
http://quasipartikel.at/multiselect/
http://www.codeproject.com/KB/ajax/jqueryajax.aspx
for asp.net:
http://www.codeproject.com/KB/user-controls/MultipleSelectionDropDown.aspx
http://www.codeproject.com/KB/webforms/DataGridDropDownList.aspx
http://www.codeproject.com/KB/asp/multiselectdropdown.aspx

Resources