Pixelkit Bootstrap Select Box not changing dynamically using jquery change event
I just started using PixelKit-Bootstrap-UI-Kit’s Dark-Velvet theme. It’s a beauty.
I was using the orange styled drop-down box at several places and it looked amazing.
But then came a time to dynamically select an option using jQuery.
It worked when select was not styled, using normal change triggered like so:
var category = "some_category";
$('#category_select').val(category).change();
and also by triggering a change event like this:
$('#category_select').val(category).trigger("change");
I tried similar methods with the PixelKit styled drop-downs, but it didn’t work.
Even tried their docs:
http://pixelkit.com/free-ui-kits/dark-velvet/docs/#form-select
But nothing mentioned for dynamically changing the values.
Pixelkit changes the “select” into spans and divs which is great for styling but the change event no longer gets triggered. Because the original select no longer exists.
So, a bit messy and a not so elegant workaround was this:
var category = "some_category";
// Reset form's select values (even though select is no longer there - so it's not necessary)
$("#editForm #category_select option:selected").removeAttr("selected");
$('#editForm #category_select').val(category).change();
// Here's the actual code which will change the span and div values
$('#editForm #cuselFrame-category_select span.cuselActive').removeClass('cuselActive').removeAttr('selected');
$("#editForm #cuselFrame-category_select span[val=\"" + category + "\"]").addClass('cuselActive');
$('#editForm #cuselFrame-category_select .cuselText').text($('#editForm #cuselFrame-category_select span.cuselActive').text());
It’s possible I’m missing some setting or some easier elegant solution to this, but for now this works fine.
Hope this helps anyone who is facing a similar predicament.
And if you know some simpler way that I may have missed, please let me know in the comments below đ
