jquery select onchange - opencart 2.x注册帐户页面

Question

所以我想修改opencart 2.x的默认注册帐户页面。我使用jquery replaceWith将城市input更改为select，因此访问者可以从列表中选择城市。在访客选择城市后，应在区域select上添加选项列表，以便访客可以选择地区。但这不起作用。这些mya代码：

<script type="text/javascript"><!-- 
$('select[name=\'country_id\']').on('change', function() { 
     var selected_country = this.value; 
     $.ajax({ 
      url: 'index.php?route=account/account/country&country_id=' + this.value, 
      dataType: 'json', 
      beforeSend: function() { 
       $('select[name=\'country_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>'); 
      }, 
      complete: function() { 
       $('.fa-spin').remove(); 
      }, 
      success: function (json) { 
       if (selected_country == 100) { 
        //if country indonesia is selected, we use dropdown to fetch city list (ajax) 
        select_html = '<select name="city_id" id="input-city" class="form-control"><option value=""><?php echo $text_select;?></option></select>'; 
        $('input[name=\'city\']').replaceWith(select_html); 
        $('#kecamatan').show(); 
        $('#desa').show(); 
       } else { 
        //we don't know all of cities in the world :/ 
        input_html = '<input type="text" name="city" value="<?php echo $city; ?>" placeholder="<?php echo $entry_city; ?>" id="input-city" class="form-control" />'; 
        $('select[name=\'city_id\']').replaceWith(input_html); 
        $('#kecamatan').hide(); 
        $('#desa').hide(); 
       } 

       if (json['postcode_required'] == '1') { 
        $('input[name=\'postcode\']').parent().parent().addClass('required'); 
       } else { 
        $('input[name=\'postcode\']').parent().parent().removeClass('required'); 
       } 

       html = '<option value=""><?php echo $text_select; ?></option>'; 

       if (json['zone']) { 
        for (i = 0; i < json['zone'].length; i++) { 
         html += '<option value="' + json['zone'][i]['zone_id'] + '"'; 

         if (json['zone'][i]['zone_id'] == '<?php echo $zone_id; ?>') { 
          html += ' selected="selected"'; 
         } 

         html += '>' + json['zone'][i]['name'] + '</option>'; 
        } 
       } else { 
        html += '<option value="0" selected="selected"><?php echo $text_none; ?></option>'; 
       } 

       $('select[name=\'zone_id\']').html(html); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 
      } 
     }); 
    }); 

    $('select[name=\'country_id\']').trigger('change'); 
//--></script> 
<script type="text/javascript"> 
    $('select[name=\'zone_id\']').on('change', function() { 
     $.ajax({ 
      url: 'index.php?route=localisation/indonesia/kabupaten&oc_zone_id=' + this.value, 
      dataType: 'json', 
      beforeSend: function() { 
       $('select[name=\'zone_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>'); 
      }, 
      complete: function() { 
       $('.fa-spin').remove(); 
      }, 
      success: function (json) { 
       if (json['postcode_required'] == '1') { 
        $('input[name=\'postcode\']').parent().parent().addClass('required'); 
       } else { 
        $('input[name=\'postcode\']').parent().parent().removeClass('required'); 
       } 

       html = '<option value=""><?php echo $text_select; ?></option>'; 

       if (json['kabupaten']) { 
        for (i = 0; i < json['kabupaten'].length; i++) { 
         html += '<option value="' + json['kabupaten'][i]['id'] + '"'; 

         if (json['kabupaten'][i]['id'] == '<?php echo $city; ?>') { 
          html += ' selected="selected"'; 
         } 

         html += '>' + json['kabupaten'][i]['nama'] + '</option>'; 
        } 
       } 
       $('select[name=\'city_id\']').html(html); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 
      } 
     }); 
    }); 
    $('select[name=\'zone_id\']').trigger('change'); 
</script> 
<script type="text/javascript"> 
    $('select[name=\'city_id\']').on('change', function() { 
     $.ajax({ 
      url: 'index.php?route=localisation/indonesia/kecamatan&id_kabupaten=' + this.value, 
      dataType: 'json', 
      beforeSend: function() { 
       $('select[name=\'city_id\']').after(' <i class="fa fa-circle-o-notch fa-spin"></i>'); 
      }, 
      complete: function() { 
       $('.fa-spin').remove(); 
      }, 
      success: function (json) { 
       if (json['postcode_required'] == '1') { 
        $('input[name=\'postcode\']').parent().parent().addClass('required'); 
       } else { 
        $('input[name=\'postcode\']').parent().parent().removeClass('required'); 
       } 

       html = '<option value=""><?php echo $text_select; ?></option>'; 

       if (json['kecamatan']) { 
        for (i = 0; i < json['kecamatan'].length; i++) { 
         html += '<option value="' + json['kecamatan'][i]['id'] + '"'; 

         if (json['kecamatan'][i]['id'] == '<?php echo $city; ?>') { 
          html += ' selected="selected"'; 
         } 

         html += '>' + json['kecamatan'][i]['nama'] + '</option>'; 
        } 
       } 
       $('select[name=\'kecamatan_id\']').html(html); 
      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 
      } 
     }); 
    }); 
    $('select[name=\'city_id\']').trigger('change'); 
</script> 

我试着在这里创建简单的脚本https://jsfiddle.net/oo42kq9z/并且工作。我认为它是相似的，但为什么在登录页面$('select[name=\'city_id\']').trigger('change')无法触发？

Answer 1

假设你select city_id has the id of 'city_id'你将不得不使用$(document).on("change")

$(document).on("change", "#city_id", function(){ 
/* Code Goes Here */ 
}