Ulrik McArdle Ulrik McArdle - 1 year ago 72
jQuery Question

jQuery - change doesn't fire when using bootstrap

I have a calculator that's using Bootstrap on my selects along with this extension : http://silviomoreto.github.io/bootstrap-select/

I have different texts in the options, but the value can be the same as it represent the price of the selected item.

<option value="0">Red</option>
<option value="0.23">Green</option>
<option value="0.23">Blue</option>

My problem is that jQuery doesn't fire the change event, when the value is the same. It works fine if the values differs. I thought I could make my own eventlistener, testing the textstring, but how do I do that? Or does anyone have a better idea?

Answer Source

A work around you could use is to go with data attributes. Change your select to something like the below

  <option data-value="0" value='Red'>Red</option>
  <option data-value="0.23" value='Green'>Green</option>
  <option data-value="0.23" value='Blue'>Blue</option>

Then bind to change

$('select').on('change', function(){
    var val = $(this).data('value');

This way, the change event is triggered, you just need to get the value via the data attribute.