Tengo un menú desplegable de selección para países que se supone que deben cambiar los valores de las casillas de verificación para que se pueda calcular en un resumen de precios antes de que el usuario nos lo envíe.

El problema que tengo es que estoy usando 3 códigos JavaScript para el menú desplegable de selección para hacer que 2 de ellos funcionen bien y son:

Código para ocultar los precios de los campos y mostrar a los usuarios según el país seleccionado

 <script> $(document).ready(function(){ $("select").on('change', function(){ $(this).find("option:selected").each(function(){ var optionValue = $(this).attr("value"); if(optionValue){ $(".small").not("." + optionValue).hide(); $("." + optionValue).show(); } else{ $(".small").hide(); } }); }).change(); }); </script>

Código para cambiar el valor a calcular en el formulario de estimación de costos

 <script> $(document).ready(function() { var price = { "usa": { "value1": 33.00, "value2": 30.00, "value3": 24.00 }, "uae": { "value1": 33.00, "value2": 30.00, "value3": 24.00 }, "egypt": { "value1": 177, "value2": 310, "value3": 420 } }; function updatePrice() { var val1 = +$(".value1").val(); var val2 = +$(".value2").val(); var val3 = +$(".value3").val(); var countryList = $("[name='countryList']").val(); var one = val1 * price[countryList].value1; var two = val2 * price[countryList].value2; var three = val3 * price[countryList].value3; $("#price1").val(one); $("#extraOption1").val(one); } $(".input").on("keyup", updatePrice); $("[name='countryList']").on("change", updatePrice); }); </script>

Los códigos anteriores funcionan bien, pero cuando uso el siguiente código, funciona, pero deshabilita los 2 códigos anteriores.

 // the code update the order summary on selecting the country $('#countryList').on('change', function () { showSelectedItemPrice('#countryList'); updateSummary(); saveState(); reValidateTotal(); });

Creo que los eventos de cambio se están inhabilitando unos a otros. por favor ayúdenme si hay una solución para esto