javascript - onchange 事件之间的冲突

Question

对于应该更改复选框值的国家/地区，我有一个选择下拉列表，因此可以在用户将其发送给我们之前根据价格摘要进行计算。

我遇到的问题是，我使用 3 个 JavaScript 代码进行选择下拉菜单，其中 2 个工作正常，它们是：

隐藏字段价格并根据所选国家/地区显示用户的代码

<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>

更改要在成本估算表中计算的值的代码

<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>

上面的代码工作正常，但是当我使用下面的代码时它可以工作，但是它禁用了上面的 2 个代码

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

我认为更改事件正在相互禁用。如果有解决方案，请帮助我

标签： javascript