I've been striving to use Stylish Select Box
with elements created after page load without success. In order to understand the issue, you'll need to re-produce it first. I know the following might seem a bit annoying but please continue reading if if you have 5 minutes of spare time.
Alternatively, you may obtain a completed example here to see the issue directly.
First, you'll need a <select> element. Now bind jquery.stylish-select.js
to your <select> element using something like $('select').sSelect(); after that the script hides the <select> element and creates a set of DIVs underneath it. Now your page should look like this :
<!-- Some other stuff(not important). -->
Now add another <select> element to the same page with something like $('body').append('<select>
lect>')¿ and use $(.newListSelected).remove
(); to delete the DIVs it created for the pervious ` option. Hope I'm sill clear enough.
After that you should have the following on the page :
Last, just call $('select').sSelect(); once more. It should create DIVs under both of your <select> elements. Now here's the problem, The first select box represented by the DIVs doesn't behave properly.
Alternatively, you may obtain a completed example here
to see the issue directly.
Normally when you choose an option from the select box represented by the DIVs, it should update the original <select> element's selectedIndex (DOM property) to the corresponding index of the chosen option(0 for first option, 1 for the second.. etc). But if you look closely you'll see its changing selectedIndex value to -1 for any option.