select2: swapping between text and value in multiple select2 - javascript

For some prototyping reasons I am tweaking the select2 plugin, particularly the multiple selection. I need to do two things:
<option value="VAL123">This is value 123</option> The options dropdown should show option's text This is the value 123 (default behaviour), but when selected, the "select2-search-choice" should display the selected value VAL123, not the text.
If the selection is greater than 1, I need to show a custom message text, like Multiple options selected, not the options themselves. Ideally, the selection would also avoid deleting the selected option(s) from the dropdown.
I know it seems like breaking the logic of the plugin and is probably not doable with the provided API. Any hardcore Select2 experts here to help me tweak the source code on any of these issues?
Thanks!
UPDATE: The selected options are not deleted from the list, they are just marked with the ".select2-selected" class, which can be edited in select2.css to show them anyway.

You can just use the plug in as is and use the formatSelection option and give a function such as
formatSelection: function(item) {
return item.id
}
here's a fiddle forked from someone's multiselect select2 fiddle
http://jsfiddle.net/ba98G/

Related

Disable re-select when model was selected in Angularjs-chosen

I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.

Setting Default Dynamic Values in Select2 2.4.0?

I'm currently using the most up-to-date version of Select2. The select2 box is used to display a list of skills. I am trying to set the default values (for when it's opened) to contain the current skills. I have the information in proper format, I just cannot understand how to set it. The closest I've gotten is using:
//b is array containing list of user selected options
//#e1 is select2 id
for($i=0;$i<b.length;$i++) $('#e1').val(b[$i]).trigger("change");
However, this only displays the LAST option. Which I think is because I'm not allowed to set it in a loop. However I'm unsure how else to do it??
Any current solutions are invalid as of Select v2.4.0 as initSelection and .select2("val", data etc.) was removed.
Any help is appreciated.
My solution was actually very simple and avoided for loops all together.
$('#e1').select2({
//info
}).val(b).trigger("change");
val() in jQuery also accepts arrays.

Search on hidden select2 text

With a standard select2 dropdown box, populated with a list of names from a database call, is there a way to search on hidden items within the search area?
Example:
Select2 box shows to end user "Charlie Watts" but actually the options value holds "Charlie Watts (22)". I want the use to be able to search for 22, but not show it by default to the end user.
TIA
Yep, you can achieve that using the formatResult and/or formatSelection methods. There's a great example of using them in the Select2 Docs: Templating.
In your format function, filter out the " (22)" part of your value and return everything before it.
On a UX note, it could be strange to see matches appear that don't give any indication as to why they match. If that doesn't matter for your use-case, carry on.

Unable to deselect option with Chosen and Knockout Binding

When trying to deselect the currently selected item in chosen through a knockout binding it seems to get reset back to what it was before the reset:
Here's the example:
http://jsfiddle.net/WPpH2/7
Select jQuery from the drop down and click "clear" to see this behavior.
Here's how the data bind is being done:
data-bind="value: selected, chosen: {}">
Any thoughts on how I can make this actually reset?
The reason you're seeing this is because of how the control works. When you click clear, you set the observable to null. The plugin then tries to find an option that has the value null. Because it doesn't find it, it resets your selection to what was last selected.
In your jsfiddle, if you change this line:
myViewModel.selected(null);
to this line:
myViewModel.selected("");
then your example will work. The reason is that you have an option where the value is an empty string.
Also, if you want your plugin to update on the UI, you will need to use this as well:
$(".chosen").trigger("chosen:updated");

Jquery get the selection option in select

I am trying to select a certain value in my dropdown via jquery..I tried this..
$("#membershiptype").val(1).selected;
it doesnt work..I am clearly over my head here as I am inexperience in jquery.
To select an option by index, you can do this :
$("#membershiptype").get(0).selectedIndex=1;
Demonstration
To select an option by value (the content of the option), you may use this :
$("#membershiptype").val('B');​
Demonstration
You can assign the val() to the option value you want to be selected.
$('#membershiptype').val(valueToBeSelected);

Categories