Question

I have this jQuery script that works fine:

$("select").change(function () {
          var finalPrice = 0;
          $("select option:selected").each(function () {
                if ($.cookie('descuentoGen') != null){  
                    finalPrice = Math.floor(precios[$(this).index()]*$.cookie('descuentoGen'));
                } else{
                    finalPrice = precios[$(this).index()];
                }
              });
          $("#precioFinal").text(finalPrice);
        })
        .trigger('change');

As you can see, it simply does some action when the user selects another option in the select.

Now, in a different script I’m calling this:

document.getElementById('selectFoods').selectedIndex = t;

This works as it should since it actually changes the selected option, the problem is, that why I change the selected option this way, the actions from the initial jQuery script are not executed.

Is there any way around this or will I have to duplicate the jQuery script behaviour in the other script?

Answer 1

Just try this

$('#selectFoods').prop('selectedIndex', t).change();

DEMO

Using selectedIndex will not trigger a change event. You’ve to trigger it by yourself.