How to fill automatically selectsize JS when edit the HTML form?

60 Views Asked by At

I have a form with 3 fields which are 2 input text and 1 select from dropdown menu. When I add the data then I want edit them, I want to the old data appearing on the field. Input text field is already OK but the select field (Country) which I build using selectize js is not appearing the old value.


  <form action="" method="post" id="EditForm">
    {% csrf_token %}
    <div class="col-md-12">
      <div class="form-group">
        <label for="NameEdit" class="control-label">Name</label>
        <input name="Name" id="NameEdit" type="text" class="form-control"  required
          oncopy="return true;" onpaste="return true;" oncut="return true;" />
      </div>
      <div class="form-group">
        <label for="AddressEdit" class="control-label">Address</label>
        <input name="Address" id="AddressEdit" type="text" class="form-control"
           data-toggle="popover" data-trigger="focus" required
           data-placement="left" oncopy="return true;" onpaste="return true;" oncut="return true;" />
      </div>
      <div class="form-group">
        <label for="CountryEdit" class="control-label">Country</label>
        <select name="CountryEdit" type="text" class="form-control"  id="CountryEdit"  required
        data-placement="left" oncopy="return true;" onpaste="return true" oncut="return true;" >
          <option value="">Select the country</option>
          {% for x in countries %}
          <option value="{{x.CountryCode}}">{{x.CountryCode}} ({{x.CountryName}})</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </form>
$(document).on('click', '.editUserBtn', function () {
    var user = $(this).data('id');
    editUrl = 'edit/'+user;
    var currentURL = window.location.href;
    console.log(currentURL + 'edit/' + user);
  $.ajax({
      type: "GET",
      url: currentURL + 'edit/' + user,
      success: function (data) {
        $('#EditForm').attr('action', 'edit/' + user);
        $('#EditModal').modal('show');
        $('#NameEdit').val(data.Name);
        $('#AddressEdit').val(data.Address);
        $('#CountryEdit option:checked').val(data.Country);
      }
    })
  }); 
1

There are 1 best solutions below

6
sakkyoi On

$('#CountryEdit').val(data.Country);