I am trying to delete all the values in a multiselect selectpicker from bootstrap-select (https://developer.snapappointments.com/bootstrap-select/) but it doesn't work no matter what I try.
I have tried following the examples from the remove method found in methods in the link provided above.
I have also tried using .empty() followed by .selectpicker('refresh') which only removes the first but when I click the second in the list, it shows the value of the first (removed) as selected.
JSFiddle: https://jsfiddle.net/asjnpLkh/1/
Solution:
It seems the problem was with beta3 version of bootstrap-select. Using beta2 works fine. Remove all options from bootstrap select multiselect
Related
Regarding JQuery and JQueryMobile,
Code is in this JSFiddle link: https://jsfiddle.net/nyluje/jg5cgw76/7/
I use a flipswitch to change, if a select object has the attribute multiple or not.
At first the flipswitch is off and the attribute multiple does not apply on the select.
If I use the select, I can choose only one single option (this works fine).
Then I turn the flipswitch to on. Now with the code I implemented in the function setSelectAccordingToFs() the attribute multiple is added to the select and it is then possible to pickup multiple options. But one notices that the pop-up, which is not a native menu one, does not display the multiple select correctly, like on this picture:
It keeps on displaying the single select panel. Which does allow to add up options, but does not provide the possibility to take off some:
Hence I wonder: How to refresh the select panel menu used by a select, depending on the attribute multiple value:'off' or 'on', on that select tag?
Any idea?
Ok I found the solution. I implemented it in this version of my JSFiddle: https://jsfiddle.net/nyluje/jg5cgw76/8/
The trick:
Using the option 'refresh' wasn't enough. To (really) refresh the selectmenu and include the panel in this refresh, the 'destroy' and 'enable' functionnalities have to be used. So at the bottom of my function setSelectAccordingToFs() I added something like that:
targetSelect.selectmenu('destroy');
targetSelect.selectmenu();
targetSelect.selectmenu('enable');
targetSelect.selectmenu('refresh',true);
I have been trying to use X-Editable http://vitalets.github.io/x-editable/ with Select2 https://select2.github.io/ for weeks now without much luck.
Originally I was trying to load in data from AJAX request and then use the library but all I could see if old code that supposedly worked with the older versions of both libraries.
To slightly simplify things I have now decided to load in my data separately so that X-Editable and Select2 only have to deal with an array of data that is already available.
My problem now is modifying the display of the data.
By default I am happy with the look of the edit field which looks like "tags" being selected.
When editing is completed and on initial page load, it shows my selected items as a comma separated string. I would like to modify that part to look different.
I saw some examples that worked as I want it to however they do not seem to work with the newer versions.
This JSFiddle here http://jsfiddle.net/jasondavis/j72k110m/ shows my desired output and functionality...almost but the catch is this demo is using older versions of the Select2 library. It has Select2 version v3.4.4 and X-Editable version v1.5.1
The latest version of Select2 is version v4.0.0
X-Editable is up to date at v1.5.1 as it has not been updated in a while.
On initial load and after selecting new value it should look like this below which means it wraps our selected value in a span:
When clicked to edit the selected values, it should look like this which looks like "tags" however it should not show the <span> part!
In this JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
I have updated Select2 to the new version and I am trying to replicate the functionality from the other JSFiddle above by showing the selected values as "tags".
Another issue with this version is that when selecting values, it does not remove an option from the dropdown list. So even though 1 item is selected already, it still shows up as an option to click on again!
The other issue is that new selected items do not get added on the non-edit screen.
More images below to show what I mean...
Image below shows the intial screen load selected items and also items that are selected and not in edit-mode. The issue is that it is not updating with new items that are selected. Also it shows the selected ID's instead of a title/name
My end goal is to simply use Select2 on my X-editable field to allow the selection of an Assigned User. Selected assigned users will show a gravatar thumbnail image and the user name.
Both Select2 and X-Editable allow the use of a template style output to modify there output however when they are working together, there default functionality is different and those output modification functions do not work the same as they do when running either library on it;s own.
I know what I want can be done since the 2 libraries are meant to work together, it's just a matter of getting the newer versions of Select2 to work with the older version of X-Editable which has not been updated in a long time sadly!
The final jsfiddles that I was testing on are at https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) and https://jsfiddle.net/N6bQE/331/ (poshytip-editable).
Here are some observations I made while trying to make Select2 4.0.0 work with X-Editable.
You were setting data-value to apples, oranges, pie (note the spaces), which is technically not correct. The ids are supposed to match up exactly, but due to an unfortunate mistake a feature in older versions of Select2, extra whitespace was completely ignored.
Removing the spaces solves the main issue, which was Select2 not matching options correctly (and as a result not displaying them).
Your source did not contain any of the values you were passing in through data-value, so Select2 had no way of displaying them. By lining some of the id attributes up, Select2 was one step closer to displaying the selected values when the popover was displayed.
You were using both tags and source, which X-Editable does not allow. The plugin appeared to prioritize tags over source, so nothing was actually being passed into Select2 and your source was totally ignored.
But that doesn't matter too much, because X-Editable isn't displaying the values correctly in the first place. You'll notice that the data-value is being displayed as a single tag, instead of being split up and displayed as multiple tags. In order to get X-Editable to cooperate with this, you need to set separator: ',' in your Select2 options. While this option is no longer supported for Select2, X-Editable completely ignores the viewseparator option in favor of this one.
In order to get the tags to update after they are edited, you need to check if value in the display method is an array or not. This is because X-Editable just passes back a string to the display method, instead of the array that one would expect.
I wanted to create a simple multi-select dropdown which displays days (mon,tue...sun), select all, unselect all...using angular JS, bootstrap,JS.
I wanted to write controller in a way that if i select monday twice, it de-selects and remove it from the selected items....instead it is keep on adding the elements again and again...and unselect all is not working.
I tried every other way and couldn't succeed. Plz help me or share any similar code that can give me a idea.
PS: I don't want to use jQuery for this.
Check out the following:
https://github.com/sebastianha/angular-bootstrap-multiselect
OR
http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
The second link seems to be exactly what you are looking for.
I'm using this following tool to make the dropdown searchable and look nice.
Harvesthq Chosen
First I'm loading the data dynamically in dropdown and applying this code to apply the effect.
$(".chosen-select").chosen();
It works just fine. Everything ok. Then depending on some option I want to empty all data and insert new options. Now problems occur. The newly added options are not shown. Old options are still visible.
So I checked with the firebug. Select tag contains my desired data, but it's showing wrong data(Old ones).Some kind of div is visible. I tried to apply the chosen methd once again. But not working. Then I tried
$("#form_field").trigger("chosen:updated");
And not working either. Can anybody tell me what is missing?
I want to clear and load data dynamically multiple times in dropdown and apply the chosen effect.
This worked for me
$("#form_field").trigger("liszt:updated");
When all the select options are removed from mutli-select, it displays data-placeholder value, which is fine, but clicking select box for first time, it does not pull the drop down. On second click the multi-select works fine.
This problem happens in all browsers. I also have found the same problem in demos showed in below link.
Is there any fix for this issue?
http://harvesthq.github.com/chosen/
It might just be the functionality of it. After clearing out the option, they may want you to double click on it to clear out the text.
However if you want to report the bug I would suggest doing it on their github page.
https://github.com/harvesthq/chosen/issues