how to trigger selectize input to make options shown initially - javascript

I'm using selectize, and I want to show a few options without clicking selectize input. So I use $('.selectize-input').click() but it doesn't work. How to show a few options without clicking input?

Assuming that you bind selectize plugin something like $('.selectize-input').selectize(options), you should be able to use API's open method like this:
$('.selectize-input')[0].open();

Related

Controlling Select2 programmatically without jQuery

How to control select2 component programmatically without jQuery? The code is going to be executed using Selenium and since I don't have access to the jQuery object (it's bundled with Webpack), it has to be controlled using pure JS.
I tried simulating user click like this:
document.getElementById('select2').click()
but it doesn't open. What I'm trying to achieve is:
open Select2
type something inside its search box to trigger the ajax call and shows possible options
select an option by text
You can try this workaround: document.querySelector("#example + span > .selection > span") and then trigger click. Fiddle to check: https://jsfiddle.net/zeLbk6s3/2/
You have to trigger "click" on proper element.

JQuery Mobile selectmenu() multiple option true/false -> not refreshing the displaying of choices

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

Deselecting select option in Select2 jquery plugin

I am using the select2 jquery plugin for select dropdown feature in web site.
Every select box in not required to be selected for the form submission .
I want user to be able to deselect the selected option if he wants to. Is there any way I can achieve this using Select2 Plugin. Any Help would be appreciated. Thank You.
You can put a blank option(option tag with blank value) in the select box for where you want the user to be able to deselect the value. In not sure what this has to do with select2.
If this doesn't solve you problem then let me know what options are you using to initialize select2 plugin or maybe elaborate more on the question.

Multi-select dropdown menu

I am working on creating a website using node.js and express. I want to add a multi-select dropdown box. I have a Javascript object which contains a variety of properties and would like to populate the dropdown box with all the property values. I would also like to be able to add new options to the dropdown and have them visible without having to refresh the page. Is there someway to accomplish this? Perhaps using JQuery? I would appreciate if someone could provide an example.
I've tried this example, but I would like to have a multi select checkbox for the dropdown. The example requires the user to press ctrl while clicking to select multiple options.
Thanks!
$("#select_id").append("<option value='value'>name</option>");

Google+ style autocomplete + dropdown jQuery plugin

I am looking for a jQuery plugin that behaves like the Google+ autocomplete + dropdown. In G+, I can enter a person's name and it'll look in my circles and show me a list of matches, or I can click the dropdown arrow at the end of the input box to get a list of all possible names that I can select from. I was able to find plugins that do the autocomplete, but nothing that mixes that with a dropdown functionality to show you all possible names. Any ideas?
You can also try the chosen component.
http://harvesthq.github.com/chosen/
It's a very nice piece of UI
Try jQueryUI Autocomplete: http://jqueryui.com/demos/autocomplete/

Categories