We Keep Coding

How to set cascade select2 value onClick

I have three select2 lists next to each other, first independent, second dependent on first, third dependent on second (cascading lists), that works as expected when I normally populate them by selecting some options. I have created a dynamic action that fills these items with values that I calculate when I click a button, but after the click, only the first select2 have selected value. The second and third value remains empty. When I check the session, all items have value in them. It appears that when I click the button that for a millisecond list are filled but after that values disappear. So my question is, how do I transfer values from server-side to client-side. I tried to refresh items, I have played with jQuery without success, also I have tried to separate dynamic action to set values separately but nothing worked. Values populate correctly so that is not the problem. Please help
Thank you in advance for your answer.

Is lazy loading checked for the select2 that are subject to this behaviour (Item -> Setting -> Lazy loading)? If so try unchecking it

set up form option as default in a drop down

I have created a driven database drop down menu on my website. It sends the selected value by the user to the database to be checked and returns a specific item.
Everything works perfectly now but I'm trying to pre select the first value so that the user will have the first option as default and can add it to cart directly and they also can choose a different size. So far, I tried 'selected' inside the option in the drop down but it doesn't do anything but displays the value when the page loads.
One last thing to mention, I'm using Ajax function to submit selected value and return result from the database.

I can think of two ways for this.
When the page is requested, make a call to your DB in your server-side code to store that value beforehand.
Use javascript's onload event to select the value as a part of a client-side script. You can use this answer as reference.

Select2 val not reflecting the selection order but sorts it

I have been using this third party plugin by Ivan Vaynberg and have found an issue. While using multiselect in select2 I find that the select2("val") is returning the selected values in sorted order and is not reflecting the order of element selections although select2("data") does give the selections in order. Also it seems it is a reported bug in the github but strangely there has been no response from the third party. https://github.com/ivaynberg/select2/issues/1861
Is there anyone who has faced similar problem and has a solution for this?
Also is there anyway of implementing sortResults on select options with multiple attribute (multiselect basically) because it seems that sortResults only works for the input search bar provided in the single selects.
Thanks.

I had tried various workaround but it seems the only way we can counter this for now is by making changes on the server side. What I did was to send the options as inputs (in order by appending an input every time an option is selected) in the form to the server side and process those inputs for the database. And as a result I got the options sorted on the client side when I made the request for the options again.
SortResults do work with multiple. I found out it later that my select was getting reinitialized by a redundant code which is why my sortResult attribute wasn't working.

how to use javascript to auto fill cascade select?

I'm writing a program to auto fill form blanks in the web pages. With javascript I can deal with normal blanks like username input and passwd input. But when it comes to cascade select, like some web pages asking you to input your address info, there's 3 selects: choose country, choose province and choose city. The content of the second menu is loaded upon the onchange event of the first one, so as to the third select.
I'm wondering how to auto fill these 3 selects, given that I've already known the value for each one of them. Could any one help?
The following code seems not working:
document.getElementById("selProvinces").value='11';
document.getElementById("selProvinces").onchange();
document.getElementById("selCities").value='113';
document.getElementById("selCities").onchange();
document.getElementById("selDistricts").value='1190';

You might have a few problems here.
In some browsers, calling .onchange() won't actually trigger the event. See this answer to How do I programatically force an onchange event on an input? for more details.
If the page you're filling in is ajaxing in the next lot of values in the cascade, 'selCities' might not contain the value 113 just yet. You could set a timeout and poll periodically to see if 'selCities' has some values in it before setting the value
It might not actually be the onchange event that they're using for the cascading. The oldschool way used to be onclick. They might be doing it onblur. Possibly silly, but worth peeking at the source to make sure :)

trigger 'click' after selected an option?

I have select box which load addresses form via ajax. So user can select previous saved address. Inside address form , another select box which lists 'States'. A shipping is calculated based on 'States' select box change.
I want to trigger a change after loading addresses. I used this code
$('select#addressed').change(function() {
$('select#states').trigger('change');
});
But this will trigger change before new address load.Any way to trigger after loading address?

Fire the change in the success section of the Ajax call. That way it won't fire until the data comes back. You could also use a $.when/.done as well.
http://api.jquery.com/jQuery.when/

You can fix this by putting the "click" trigger in the complete function. I'm assuming from your syntax and tag you're using jQuery. Have a look at this link under "complete".