Définir la valeur 'sélectionnée' pour le contrôle Select2 avec le filtre

Question

J'ai un contrôle select2 sur un formulaire, le contrôle est rempli par un appel Ajax déclenché par l'utilisateur en tapant une valeur dans le filtre. Cela fonctionne très bien pour toute nouvelle entrée sur le formulaire. Le problème que j'ai est quand une entrée est éditée, le même formulaire est utilisé mais je ne peux pas sélectionner la valeur par défaut car le formulaire n'a pas d'options par défaut.

est ici le balisage de la forme:

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

est inférieure à la jQuery que j'ai écrit:

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

La seule chose que je veux faire est d'avoir l'option sélectionnée précédemment affichée à l'utilisateur et ceci peut être changé si désiré. Ceci est implémenté sur OpenCart et utilise un modèle personnalisé pour récupérer les options filtrées. Dans ma première tentative pour implémenter cela, j'ai trouvé plus facile d'utiliser un champ caché et de le remplir quand une sélection a été faite sur le $("#input-shipping-country") alors j'ai fait un autre champ caché pour la zone qui est remplie lorsque la page se charge :

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

donc, en théorie, je dois mettre simplement la valeur de la zone de sélection une fois que la commande est initialisée mais la documentation est pas très clair ici, devrais-je avoir une option par défaut dans mon HTML?

Answer 1

Après avoir rempli toutes les valeurs select, définissez la valeur par défaut comme

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