Answers.Body: <p>In general, when you want to listen to an event on a select2 you place the listener on the original form element (which is either an <code>&lt;input&gt;</code> or a <code>&lt;select&gt;</code>). When inspecting the dom, you'll see it close to the select2 div, hidden because it has the <code>select2-offscreen</code> class.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-30T02:14:01.850Z
Answers.LastActivityDate: 2018-01-30T02:14:01.850Z
Answers.UserDisplayName: Coleman
Answers.Body: <p>Try below code:</p>
  
  <pre><code>  CRM.$(function($) {
      $('#billing_country_id-5').change(function () {
        var countryId = $(this).val();
      });
    });
  </code></pre>
  
  <p>HTH</p>
  
  <p>Pradeep</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-29T10:18:03.713Z
Answers.Text: Yes! thank you! oh I've been working on this for hours!
Answers.UserDisplayName: Elad
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-29T09:52:04.460Z
Answers.LastActivityDate: 2018-01-29T09:52:04.460Z
Answers.UserDisplayName: Pradeep Nayak
Body: <p>How can I listen in JavaScript to the event of a country value change on the country select field?</p>
  
  <p>both #select2-drop-mask and #select2-drop are not available until the user clicks to open the select.</p>
  
  <p>and the hidden select #country-5 is not firing the change event as its values are set programatically.</p>
  
  <p>This question was asked <a href="https://civicrm.stackexchange.com/questions/4221/capture-country-field-selection-with-js-jquery">here</a> but has a wrong answer.</p>
  
  <p>Thank you</p>
  
Tags: <select2>
Title: How to listen to country select change
ThreadText: # How to listen to country select change
  
  (Asked by: username_0 on 2018-01-29)
  
  How can I listen in JavaScript to the event of a country value change on the country select field?
  
  both #select2-drop-mask and #select2-drop are not available until the user clicks to open the select.
  
  and the hidden select #country-5 is not firing the change event as its values are set programatically.
  
  This question was asked [here](https://civicrm.stackexchange.com/questions/4221/capture-country-field-selection-with-js-jquery) but has a wrong answer.
  
  Thank you
  
  **Tags:** select2
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_2 on 2018-01-29. Score: 4 | Accepted answer
  
  Try below code:
  
  ```
    CRM.$(function($) {
      $('#billing_country_id-5').change(function () {
        var countryId = $(this).val();
      });
    });
  
  ```
  
  HTH
  
  username_2
  
  > **Comments:**
  > **username_0**: Yes! thank you! oh I've been working on this for hours!  
  
  ---
  
  ### Answer by username_1 on 2018-01-30. Score: 2
  
  In general, when you want to listen to an event on a select2 you place the listener on the original form element (which is either an `<input>` or a `<select>`). When inspecting the dom, you'll see it close to the select2 div, hidden because it has the `select2-offscreen` class.
  
  
  ---
  
  