檢測下拉列表是否已被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');
        }
    });
});

該功能可在選擇地址時獲取隱藏的表單值，並將其應用於表單。 這是用香草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

如果正在設置下拉列表的javascript（我假設它是一個select標簽）正在使用jQuery，則可以使用鈎子強制更改事件在$（'＃select'）。val（'option'）被調用時觸發。 這樣，您無需修改​​更改下拉列表的代碼，該代碼可能在庫中。

像這樣：

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

可能在事件觸發時尚未記錄值更改，因此觸發可能需要進入setTimeout。 我不確定，您也許可以省略get函數。

Answer 3

我認為您必須將on change偵聽器指向dropdown元素：

    $(#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