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