title: How to programmatically select an option in select2 from chrome extension content script?
body: <p>I have tried all the answers on StackOverflow. But, I can't seem to be able to programmatically select an option based off the value of the option.</p>
  
  <p>I am doing this from a content script in a Chrome extension -> don't know if that changes anything.</p>
  
  <p>My code is below:</p>
  
  <pre class="lang-js prettyprint-override"><code>chrome.runtime.onMessage.addListener(
    function(response, sender, sendResponse){
      if (typeof response === 'string' || response instanceof String){
          var dropdown = false;
  
          if ((document.getElementById(response)).nodeName == 'SELECT'){
  
              //console.log('im here');
  
              dropdown = true;
              var options = $('#' + response).find('option');
              var random_num = ~~((Math.random() * (options.length - 1)) + 1 );
              var radnom_option = options[random_num];
              var value = radnom_option.value;
              var slctr = ('#' + response);
  
              /*
                I thought that the next two lines would change the selected option.
              */
              $(slctr).val(value); 
              $(slctr).trigger('change.select2');
  
              console.log($(slctr));
              console.log(options);
              console.log(random_num);
              console.log(radnom_option);
              console.log(value);
              console.log(slctr);
          }
  
          dropdown = true;
          sendResponse(dropdown);
      }
  });
  </code></pre>
  
  <p>When this runs, the console shows:</p>
  
  <pre class="lang-none prettyprint-override"><code>[select#entity_email_1_createPersonEmailType.form-control.entity_email.select2.required, context: document, selector: "#entity_email_1_createPersonEmailType"]
  
  [option, option#option_business, option#option_other, option#option_personal, option#option_school, prevObject: init[1], context: document, selector: "#entity_email_1_createPersonEmailType option"]
  
  2
  
  &lt;option id="option_other" data-option-id="option_other" value="916"&gt;Other&lt;/option&gt;
  
  916
  
  #entity_email_1_createPersonEmailType
  </code></pre>
  
  <p>The part of the HTMl that I am trying to modify is this:</p>
  
  <pre><code>&lt;div
                                          class="col-md-12"
                                                      &gt;
                          &lt;div class="form-group formGroup"&gt;
                                          &lt;label
                              class="control-label"
                                                              for="entity_email[1][quickAddPersonEmailType]"
                                                              &gt;Email Type* &lt;/label&gt;
                                      &lt;select
                          placeholder=""
                          class="form-control  entity_email select2  required "
                                                      name="entity_email[1][email_type]"
                                                      id="entity_email_1_quickAddPersonEmailType"
                          title="Email Type"
                                                      data-field-suffix=""
                          data-field-name="email_type"
                          data-init-callback=""
                          data-field-alias="Email Type"
                          tabindex=""
                                                                                   data-field-required="entity_email"                                                                                                         &gt;
                                                                                                                                                              &lt;option data-option-id="option_empty" value=""&gt;Select&lt;/option&gt;
      &lt;option
      id="option_business"
      data-option-id="option_business"
      value="915"
      &gt;Business&lt;/option&gt;
          &lt;option
      id="option_other"
      data-option-id="option_other"
      value="916"
      &gt;Other&lt;/option&gt;
          &lt;option
      id="option_personal"
      data-option-id="option_personal"
      value="913"
      &gt;Personal&lt;/option&gt;
          &lt;option
      id="option_school"
      data-option-id="option_school"
      value="914"
      &gt;School&lt;/option&gt;
  </code></pre>
  
  <p>This is all what I would expect in terms of the console. But, still the select element remains at the first option, 'Select'. Also when I tried a method outlined on StackOverflow which included calling the select2() function, there was a 
      TypeError
  saying that the select2() function was not defined. But how could this be the case, if the HTML includes select2 elements?</p>
  
  <p>What am I doing wrong here? Is there another way to achieve the end goal of being able to select a specific option? For example, could I delete all the options, and then add them all again while changing the default?</p>
  
  <p>Any help would be greatly appreciated. Thanks in advance. </p>