使用过滤器为 Select2 控件设置“选定”值

Question

我在表单上有一个 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