title: Setting listbox value with different value and label upon page load
body: <p>I am trying to set form value upon page load in a dropdown listbox which loads value thru an ajax call. I was suggested the use of addOption in another thread for a different problem but unfortunately that option does not work for me because data id and data name are different in this case and I only get data Id when the form is rendered. I have noticed addOption code gets executed before the ajax request sends data back.</p>
  
  <p>Following are code snippets from the project. Is there a way to set the value after ajax request is complete?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;select name="country" placeholder="Please Select Country  ..."&gt;&lt;/select&gt;
  </code></pre>
  
  <p><strong>Data population, JavaScript code</strong></p>
  
  <pre><code>$('[name="country"]').selectize({
      valueField: 'id',
      labelField: 'name',
      searchField: 'name',
      preload: true,
      create: false,
      render: {
          option: function(item, escape) {
              return '&lt;div&gt;' + escape(item['name']) + '&lt;/div&gt;';
          }
      },
  
      load: function(query, callback) {
          $.ajax({
              url: '/countrydata',
              type: 'GET',
              error: function() {
                  callback();
              },
              success: function(res) {
                  callback(res);
              }
          });
      },
  });
  </code></pre>
  
  <p><strong>Data returned by Ajax call</strong></p>
  
  <pre><code>id name
  1  USA
  2  China
  3  Japan
  </code></pre>
  
  <p>Following is my <strong>value setting code</strong> which I want to work</p>
  
  <pre><code>$('[name="country"]').selectize();
  $('[name="country"]')[0].selectize.setValue(3);
  </code></pre>
  
  <p>Had the valueField and labelField be the same, I could have used following addOption method as suggested in another post but as I am only getting Id upon form render, I cannot use the following code. </p>
  
  <pre><code>var item  = {};
  item.id   = countryName;
  item.name = countryName;
  
  $('[name="country"]')[0].selectize.addOption(item);
  </code></pre>