title: change select list after bootstrap modal confirmation
body: <p>I have a select list.</p>
  
  <p>When the user changes the select list option, I want the bootstrap modal to be displayed and only if the modal's confirm button is checked, change the select list.</p>
  
  <p>I just cannot seem to get the code right and couldn't find a google answer.</p>
  
  <p>Here is my select list code:</p>
  
  <pre><code>&lt;select id="id_language_code" name="language_code" required=""&gt;
  
      &lt;option value="en" selected="selected"&gt;English (US)&lt;/option&gt;
      &lt;option value="en-ca"&gt;English (Canada) - English (Canada)‎&lt;/option&gt;
      &lt;option value="en-gb"&gt;English (UK) - English (UK)‎&lt;/option&gt;
      &lt;option value="es"&gt;Spanish (Spain) - español (España)‎&lt;/option&gt;
      &lt;option value="es-419"&gt;Spanish (Latin America) - español (Latinoamérica)‎&lt;/option&gt;
      &lt;option value="fr"&gt;French (France) - français (France)‎&lt;/option&gt;
      &lt;option value="fr-ca"&gt;French (Canada) - français (Canada)‎&lt;/option&gt;
      &lt;option value="fr-ch"&gt;French (Switzerland) - français (Suisse)‎&lt;/option&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>Here is my modal code:</p>
  
  <pre><code>&lt;div id="language_change_modal" class="modal rounded modal-confirm-medium-width fade" style="height: 230px;" role="dialog" aria-labelledby="cancelConfirmLabel" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&lt;icon class="glyphicon glyphicon-remove"&gt;&lt;/icon&gt;&lt;/button&gt;&lt;h4 class="modal-title" id="cancelConfirmLabel"&gt;{% trans "Confirm Change Language" %}&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body-confirm"&gt;{% trans "This will reset all your details." %} {% trans "Are you sure you want to change languages?" %}&lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a class="btn rounded btn-default" data-dismiss="modal" aria-hidden="true"&gt;&lt;i class="fa fa-times-circle icon_padding"&gt;&lt;/i&gt;{% trans "No" %}&lt;/a&gt;
          &lt;span class="spacer"&gt;&lt;/span&gt;
          &lt;a class="btn rounded btn-primary" id="cancelConfirmOK"&gt;&lt;i class="fa fa-check-circle icon_padding"&gt;&lt;/i&gt;{% trans "Yes" %}&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my js/jq trigger code:</p>
  
  <pre><code>$(document).ready(function() {
    ....
    $('#id_language_code').on('change', function() {
      $('#language_change_modal').modal('show');  // user confirm language change.
    });
  </code></pre>