Dynamic Multiple dropdowns for select2 plugin - jquery-select2

I working on select2 plugin and I am need some help here.
I have a select2 dropdown and when selecting from the dropdown , I need to create another dropdown below the 1st dropdown with options excluding the one already selected. So, there will be dropdowns as many as options.
I know there is a option for Multiple, but I want like 'single block'.

Related

Select2 4.0.0 cascading dropdowns

I'm using select2.full.js
I'm not using any require.js to help me pull in modules, I'm basically using my know how from everything I learned in v3.5
I've been trying countless of hours, wrapping my head around this, but I have no idea how to make ajax cascading dropdowns.
Example: You load up the page, there is the first select2 dropdown that pulls data using ajax automatically (you don't enter anything.. data is there on the page load from the server), a default value is selected. Since that default value is selected, the second select2 drop down will use that value to make an ajax call to populate its own list. Now, when I select another value in the first select2 dropdown, the second select2 dropdown will reflect those changes with the new dataset.
What I've able to come up with was a 3 dropdowns that you can populate on a page load, but when you do any ajax request, the dropdown data doesn't change.
It's been two years since I used select2, and the library keeps changing, the documentation keeps changing, I'm at my wits end with this library. But I feel drawn to it by the bootstrap support, and the look and feel. The functionality, the way to implement things, the documentation is just so unbelievably awful.
I don't have any useful code at all, I've been pulling, plugging, modifying, etc.. and now I'm moving to my hair and teeth.
ANY useful example to do this would be awesome.
Just found my answer..
I was using the templating:
<select id="test">
<option value="1">1</option>
<option value="2">2</option>
</select>
to:
data = [{id: "1", text: "1"}, {id: "2", text: "2"}];
<input id="test" type="hidden" />
and just kept my jquery on select2 the same. So it was really just a change in the templating from to that solved it.
However, the only downside to this is that when you are refreshing new data from these drop downs, the highlighted (selected value) is always the first item in the drop down list, even though that's not the selected value shown in the dropdown.
Here is a small code snippet to make Select2 (v4.x) cascading dropdown - https://gist.github.com/ajaxray/187e7c9a00666a7ffff52a8a69b8bf31
Using this module, options of a select2 list box will be loaded/refreshed by ajax based on selection of another select2 list box.
Example use -
new Select2Cascade($('#province'), $('#district'), 'path/to/geocode', {type:"district", parent_id: ''});
Selected value of parent select2 listbox will be set to the parent_id of the data object before ajax call.

rails_admin change dropdown enum with javascript

I've override rails_admin edit and new form and controller via routes,
and added a javascript to watch for on change of country dropdown,
and refreshed the state dropdown.
but i couldn't find a way to replace the dropdown for state or manipulate the list.
does anyone know what script is rails_admin using for drop down?
I've tried to manipulate the select dropdown, but its been replaced and hidden by a script.

Struts2 create dropdown dymamically based on first dropdown value in Struts2 using hibernate

Hi I am using Struts2 and hibernate now in my jsp I have Two dropdown ,on selection of first drop it should call a function and retrive the values for second drop down from the database
Please help
Well you have number of options here and some of them are
user struts2-jquery plugin which comes with this feature where you can create two dependable select.
user simple jquery with JSON (struts2 plugin) and use ajax.
i will prefer second approach which is much more flexible.create a custom JS function with help from jquery and when use select first option from drop down call your action methods which will send JSON data based on the selected values and use JQuery build in JSON parsing mechanism to parse the content and fill second drop-down.
a simple Google search will give you a number of results.

jQuery Mobile option select list with text search?

I have a select option list and im using jQuery Mobile. My list is very long so Id like to give users the option of searching the list by typing in text.
Is there some native / jQuery Mobile way of adding a text search when you focus on the list? If not I guess instead on an input ill need to create a link to a new page with a filter list, and use javascript to populate the 'input' with the value selected.
http://jquerymobile.com/test/docs/lists/lists-search.html
The short answer is no, unless you want to go nuts editing the JQM code to add that feature to the select box. That being said, I also had this problem (with the select menus being way too long), and here's what I did:
For one scenario, I used an autocomplete search box (that had results drop down: http://jqueryui.com/demos/autocomplete/) in addition to the select menu, populated with the data in the select menu. That way the user could choose whether to use the select menu or search.
For a second scenario, I allowed the user to search for something, then brought up a menu (really a dialog plugin) with only the results that matched what they searched for.
Hope this helps.
Personally, I could not get the jqueryui autocomplete to work well with jQuery Mobile. But this autocomplete code from Andy Matthews worked well:
http://www.andymatthews.net/code/autocomplete/
Used in conjection with an input text field, it provides a way for users to type in a few characters and see a list of choices to select.

paginaton dropdown with jquery

I want to have a dropdown that will have the user select which record number they want to be on? so if I ave 200 records in db, it will have 4 pages and dropdown will look like this
"Just an idea..not an exact code"
<select>
<option>1-50</option>
<option>51-100</option>
<option>101-150</option>
<option>151-200</option>
</select>
I seen pagination with other types in jquery but not dropdown. Any help will be appreciated.
Thanks
Check this excellent tutorial/plugin for doing pagination with jQuery. You can bind the change event of your dropdown and then use next, previous callbacks on it.

Resources