为带筛选器的 Select2 控件设置'selected'值

Question

i在表单上具有Select2控件，该控件由用户触发的AJAX调用填充，该呼叫由用户触发，将值键入过滤器。这非常适合表格上的任何新条目。我遇到的问题是在编辑条目时，使用相同的表单，但是我不能选择默认值，因为该表单默认没有任何选项。

这是表格的标记：

  <div class="form-group required">
    <label class="col-sm-2 control-label" for="input-shipping-country"><?php echo $entry_country; ?></label>
    <div class="col-sm-10">
      <select name="country_id" id="input-shipping-country" class="form-control">
        <option value=""><?php echo $text_select; ?></option>
        <?php foreach ($countries as $country) { ?>
        <?php if ($country['country_id'] == $shipping_country_id) { ?>
        <option value="<?php echo $country['country_id']; ?>" selected="selected"><?php echo $country['name']; ?></option>
        <?php } else { ?>
        <option value="<?php echo $country['country_id']; ?>"><?php echo $country['name']; ?></option>
        <?php } ?>
        <?php } ?>
      </select>
    </div>
  </div>
  <div class="form-group required">
    <label class="col-sm-2 control-label" for="input-shipping-zone"><?php echo $entry_zone; ?></label>
    <div class="col-sm-10">
      <select name="zone_id" id="input-shipping-zone" class="form-control">
      </select>
    </div>
  </div>

以下是我写过的jQuery：

$(document).ready(function () {
    $('#input-shipping-country').change(function () {
       var i = $('#input-shipping-country').val();
        $('#hiddenPaymentCountryId').val(i);
    });
    $('#input-shipping-country').select2({
        placeholder: "--- Please Select ---", 
        allowClear: true
    });
    var mySelect = $('#input-shipping-zone');
    $.each( function (val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
    $('#input-shipping-zone').select2({
        placeholder: "Select a suburb",
        allowClear: true,
        ajax: {
            url: '../index.php?route=extension/total/shipping/country' ,
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    country_id : (($("#hiddenShippingCountryId").val() == "") ? ($('#input-shipping-country').val()) : $("#hiddenShippingCountryId").val()),
                    filter: params.term + '%', 
                    page: params.page
                };
            },
            processResults: function (data, page) {
                var zones = [];
                data['zone'].forEach(function (d) {
                    zones.push({
                        id: d.zone_id,
                        text: d.name
                    });
                });
                return {
                    results: zones
                };
            },
        },
        minimumInputLength: 2,
    });
});

我唯一想做的就是将先前选择的选项显示给用户，如果需要，可以更改。这是在OpenCart上实现的，并使用自定义模型检索过滤的选项。

在我第一次实施此操作时，我发现在$("#input-shipping-country")上进行选择时，更容易使用隐藏的字段并填充它，因此我为该区域做了另一个隐藏的字段，该区域是在页面加载时填充的：

  <input type="hidden" id="hiddenShippingCountryId" value="">
  <input type="hidden" id="hiddenShippingZoneId" value="<?php echo $shipping_zone_id; ?>">

因此，从理论上讲，我需要简单地设置选项框的值后，一旦控件被初始化，但此处的文档不太清楚，我的html中是否有默认选项？

Answer 1

填充select中的所有值后，将默认值设置为

$('#input-shipping-country').val(1).change();//1 is value of select