使用過濾器為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