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

Question

I have a select2 control on a form, the control is populated by an Ajax call triggered by the user typing a value into the filter. This works great for any new entry on the form. The problem I have is when an entry is edited, the same form is used however I cannot select the default value as the form does not have any options by default.

Here's the form's markup:

  <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>

Below is the jQuery that I've written:

$(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,
    });
});

The only thing I wish to do is have the previously selected option displayed to the user and this can be changed if desired. This is implemented on OpenCart and uses a custom model to retrieve filtered options.

In my first attempt to implement this, I found it easier to use a hidden field and populate this when a selection was made on the $("#input-shipping-country") so I've made another hidden field for the zone which is populated when the page loads:

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

So in theory, I need to simply set the value of the select box once the control is initialised but the documentation isn't very clear here, should I have a default option in my HTML?

Answer 1

在select填充所有值之后，将默认值设置为

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