检测下拉菜单是否已被 Javascript 函数更改

Question

我有一个 Javascript 函数，它可以根据可用的地址列表自动填充表单字段。如果用户选择的选项是美国以外的国家/地区，我们将不需要填写表单中的邮政编码/州字段（所有“必需”验证都通过“data-required=true”处理）。表单是动态生成的，所以我不能使用某些人建议的 .change() 方法。

我有一个“更改”侦听器设置来删除“需要数据”属性，如果他们单击“国家/地区”下拉菜单并选择其他国家/地区，该属性将起作用。但是，当 Javascript 函数更改相同的下拉列表时，它不起作用。

jQuery( document ).ready(function() {

    jQuery('body').on('change','#coHCOUN',function() {
        if(jQuery(this).val() == 'US') {
            jQuery('#coHPOST').attr('data-required','true');
            jQuery('#coHSTE').attr('data-required','true');
        } else {
            jQuery('#coHPOST').removeAttr('data-required');
            jQuery('#coHSTE').removeAttr('data-required');
        }
    });
});

在选择地址时抓取隐藏的表单值并将其应用于表单的功能。这是用 vanilla javascript 编写的旧代码，而不是 jQuery：

function SetShipTo(CIPID) {
    document.getElementById("coHNAME").value=document.getElementById("vSHIPTO" + CIPID + "HNAME").value;
    document.getElementById("coHATN").value=document.getElementById("vSHIPTO" + CIPID + "HATN").value;
    document.getElementById("coHAD1").value=document.getElementById("vSHIPTO" + CIPID + "HAD1").value;
    document.getElementById("coHAD2").value=document.getElementById("vSHIPTO" + CIPID + "HAD2").value;
    document.getElementById("coHAD3").value=document.getElementById("vSHIPTO" + CIPID + "HAD3").value;
    document.getElementById("coHSTE").value=document.getElementById("vSHIPTO" + CIPID + "HSTE").value;
    document.getElementById("coHPOST").value=document.getElementById("vSHIPTO" + CIPID + "HPOST").value;
    document.getElementById("coHCOUN").value=document.getElementById("vSHIPTO" + CIPID + "HCOUN").value;
    document.getElementById("coHVIA").value=document.getElementById("vSHIPTO" + CIPID + "HVIA").value;
    document.getElementById("coHSHPR").value=document.getElementById("vSHIPTO" + CIPID + "HSHPR").value;
    document.getElementById("coCIPLOC").value=document.getElementById("vSHIPTO" + CIPID + "CIPLOC").value;
    document.getElementById("SAVESHIPTOFU").checked=false;
}

是否可以添加另一个事件侦听器来检测值是否从 javascript 函数中更改？如果可能的话，我不想在自动填充函数中添加额外的代码

Answer 1

在下拉更改的函数内触发更改，可以在这里帮助您

$('#coHCOUN').trigger('change')

Answer 2

我认为您必须将 on change 侦听器指向下拉元素：

    $(#coHCOUN).change(function(){
        if(jQuery(this).val() == 'US') {
            jQuery('#coHPOST').attr('data-required','true');
            jQuery('#coHSTE').attr('data-required','true');
        } else {
            jQuery('#coHPOST').removeAttr('data-required');
            jQuery('#coHSTE').removeAttr('data-required');
        }

});    

此链接可能会有所帮助http://www.w3schools.com/jquery/event_change.asp

Answer 3

如果设置下拉列表的 javascript（我假设它是一个选择标记）正在使用 jQuery，您可以使用钩子强制更改事件在 $('#select').val('option') 时触发叫做。这样您就无需修改更改下拉列表的代码，该代码可能位于库中。

类似这样的：

$.valHooks.select = {
  get: function(elem) {
    return $(elem).val();
  },
  set: function(elem, value) {
    $(elem).val(value).trigger('change');
  }
};

值更改可能在事件触发时尚未注册，因此触发器可能需要进入 setTimeout。你也许可以省略 get 函数，我不确定。