[SOLVED] Dependent smart select values - v2

Hey guys,

So I have 2 smart select elements in the page which are opening in ‘page’ views.

Select-1 lists countries - England, France and Germany. Select-2 lists cities - London, Manchester, Paris, Monaco, Berlin, Munich. The available options of Select-2 are dependent on the selected value of Select-1.

How can I implement this dependency? (England - London, Mancheter. France - Paris, Monaco. Germany - Berlin, Munich).

I have tried to run the following code in the pageInit block of the page. I am able to detect the newly selected county, but it is not affecting the options of Select-2.

$("#selectCountries").on('change', function(){$("#selectCities").append(city);
    } 

I have left the lines of code which I think are rather obvious. How can I influence the options of Select-2 based on the selected value of select-1?
Thanks

If you have detected the change, why not simply update / change possible values in the 2nd smart select (remove / add options) within the select Tag.

Best regards
Andreas

That is where am stuck!

I thought this line would update the values

$("#selectCities").append(city);

But it does not. No effect.

That is the same line I use to populate the options in the first place from database values, but it is not working. Am wondering whether am calling it from the wrong place (pageInit).

I think there is a mistake on your side.
It is…
append('<option value="test">descr</option>')

And must be within the select tag where all the other options are located.

Pls go e.g. to the kitchen sink side
http://framework7.io/kitchen-sink/

-> smart select. Open chrome console and type

$('select').append('<option value="test">test2</option>')

Yeah, that is what am doing. “city” is a javascript variable that holds the code

 '<option value="2">Manchester</option>'

Have you checked the resulting Dom? In the console it works perfect. No update etc required.

I have solved it. Turns out what I was doing was right.

The issue was that I was not typecasting a variable somewhere, and that was causing a bug in the smart select code.

Thanks a lot for your help @Andreas_Kramling

1 Like