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

Question

所以我正在尝试修改 opencart 2.x 的默认注册帐户页面。我使用 jquery replaceWith 将城市 input 更改为 select，因此访问者可以 select 列表中的城市。在访问者 select 城市之后，它应该将选项列表添加到地区 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 */
}

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

jquery select onchange - opencart 2.x register account page

javascript

jquery

opencart2.x