Answers.Body: <p>The easiest way to do this would probably be to add a teeny script to the page footer of your webform that does:</p>
  
  <pre><code>CRM.$.fn.crmSelect2 = function(){};
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-20T15:37:05.140Z
Answers.Text: I have managed to get this working in a contribution page by sticking Coleman's code into a <script> tag and adding it to a block on the contribution page. Yay
Answers.UserDisplayName: Jon-man
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-04T18:26:08.873Z
Answers.LastActivityDate: 2016-11-04T18:26:08.873Z
Answers.UserDisplayName: Coleman
Answers.Body: <p>In order to work "around" Select2 sometimes behaving inconsistently in automated testing, I've been using this after the page loads to turn those fields back into regular browser selects.</p>
  
  <pre><code>CRM.$('.crm-select2').select2('destroy');
  </code></pre>
  
  <p>Coleman suggested that it should be possible to use <code>$('#my_field').val('foo').change()</code> to set values, and this works sometimes, but not reliably enough to test with. The above JS can be executed in a test to make forms behave more predictably.</p>
  
  <p>I wouldn't recommend this approach to address select2 for your site end-users, because they will see a "flash of select2 content" effect :) But since lots of people have answered with ways to deal with this, I figured I'd document this approach.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-21T20:50:59.250Z
Answers.Text: When you say "not reliably" there's only one case I can think of where this wouldn't be reliable and that's if you happen to be working with Drupal's copy of jQuery and not CRM.$. I've hit that problem before - events fired from one jQuery don't get "seen" by the other. Workaround is to fire javascript's native change event on the dom element.
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-21T21:11:12.017Z
Answers.Text: I ran into this in a few locations: Codeception/Selenium/Firefox with [WebDriver's selectOption](http://codeception.com/docs/modules/WebDriver#selectOption), and with [Fake.app](http://fakeapp.com/) using their equivalent "select" method. I *think* I tried `CRM.$` in both cases, but I'll aim to test this again when I next get a chance. Thanks for that suggestion!
Answers.UserDisplayName: Chris Burgess
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-04T18:50:24.307Z
Answers.LastActivityDate: 2016-11-04T18:50:24.307Z
Answers.UserDisplayName: Chris Burgess
Answers.Body: <p>An alternative way of getting webform selects to match each other would be to make them <em>all</em> select2. It's a nice widget - you might like it :)</p>
  
  <p>This module can do that for you: <a href="https://github.com/colemanw/webform_select2" rel="nofollow noreferrer">https://github.com/colemanw/webform_select2</a></p>
  
  <p>And to avoid needing a 2nd copy of the select2 library (along with a whole bunch of other redundant scripts) check out <a href="https://www.drupal.org/project/civi_jquery" rel="nofollow noreferrer">https://www.drupal.org/project/civi_jquery</a></p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-04T18:27:52.030Z
Answers.LastActivityDate: 2016-11-04T18:27:52.030Z
Answers.UserDisplayName: Coleman
Answers.Body: <p>Yes it is possible but you would need to edit the template that is being used. Without knowing where the select box is on your contribution page, I can't say which template you need to edit. I suggest using firebug or chrome dev tools to pick out some of the surrounding html and doing a text search to see which template is being used. Then you can follow the docs for making a custom template. </p>
  
  <p>It is not difficult to do this, but it is not ideal because if the template gets updated, yours will be left behind.</p>
  
  <p>It would be better to add some custom css so that the select2's are made to look like the other select boxes. However I have never found a quick or easy way of adding custom CSS to Civi. If you are already using a custom Drupal theme you could add the CSS to your theme. Otherwise the template method is probably the best way to go.</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-11-04T15:05:47.433Z
Answers.LastActivityDate: 2016-11-04T15:05:47.433Z
Answers.UserDisplayName: naomi
Answers.Body: <p>is there a way to disable select2 in CiviCRM pages? e.g. contribution pages.</p>
  
  <p>We added this to the footer of the page to no avail: -
  <code>CRM.$('.crm-select2').select2('destroy');</code></p>
  
  <p>It is the core code that dictates the styling of some fields?</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-11T12:20:20.763Z
Answers.LastActivityDate: 2017-07-11T12:20:20.763Z
Answers.UserDisplayName: Jon-man
Body: <p>I have some forms in drupal 7 using native civicrm, and some using webform integration. The webforms use normal select dropdowns for state and country, but when i create a contribution page in civi, it uses styled select2 dropdowns. I would like to disable this and just have plan selects. Is it possible?</p>
  
Tags: <drupal>
Title: Disable select2 in drupal
ThreadText: # Disable select2 in drupal
  
  (Asked by: username_0 on 2016-11-03)
  
  I have some forms in drupal 7 using native civicrm, and some using webform integration. The webforms use normal select dropdowns for state and country, but when i create a contribution page in civi, it uses styled select2 dropdowns. I would like to disable this and just have plan selects. Is it possible?
  
  **Tags:** drupal
  
  
  ---
  
  ## 5 answers
  
  ### Answer by username_1 on 2016-11-04. Score: 3
  
  The easiest way to do this would probably be to add a teeny script to the page footer of your webform that does:
  
  ```
  CRM.$.fn.crmSelect2 = function(){};
  
  ```
  
  > **Comments:**
  > **username_2**: I have managed to get this working in a contribution page by sticking username_1's code into a <script> tag and adding it to a block on the contribution page. Yay  
  
  ---
  
  ### Answer by username_3 on 2016-11-04. Score: 0
  
  In order to work "around" Select2 sometimes behaving inconsistently in automated testing, I've been using this after the page loads to turn those fields back into regular browser selects.
  
  ```
  CRM.$('.crm-select2').select2('destroy');
  
  ```
  
  username_1 suggested that it should be possible to use `$('#my_field').val('foo').change()` to set values, and this works sometimes, but not reliably enough to test with. The above JS can be executed in a test to make forms behave more predictably.
  
  I wouldn't recommend this approach to address select2 for your site end-users, because they will see a "flash of select2 content" effect :) But since lots of people have answered with ways to deal with this, I figured I'd document this approach.
  
  > **Comments:**
  > **username_1**: When you say "not reliably" there's only one case I can think of where this wouldn't be reliable and that's if you happen to be working with Drupal's copy of jQuery and not CRM.$. I've hit that problem before - events fired from one jQuery don't get "seen" by the other. Workaround is to fire javascript's native change event on the dom element.  
  > **username_3**: I ran into this in a few locations: Codeception/Selenium/Firefox with [WebDriver's selectOption](http://codeception.com/docs/modules/WebDriver#selectOption), and with [Fake.app](http://fakeapp.com/) using their equivalent "select" method. I *think* I tried `CRM.$` in both cases, but I'll aim to test this again when I next get a chance. Thanks for that suggestion!  
  
  ---
  
  ### Answer by username_1 on 2016-11-04. Score: 0
  
  An alternative way of getting webform selects to match each other would be to make them *all* select2. It's a nice widget - you might like it :)
  
  This module can do that for you: <https://github.com/colemanw/webform_select2>
  
  And to avoid needing a 2nd copy of the select2 library (along with a whole bunch of other redundant scripts) check out <https://www.drupal.org/project/civi_jquery>
  
  
  ---
  
  ### Answer by username_4 on 2016-11-04. Score: 0
  
  Yes it is possible but you would need to edit the template that is being used. Without knowing where the select box is on your contribution page, I can't say which template you need to edit. I suggest using firebug or chrome dev tools to pick out some of the surrounding html and doing a text search to see which template is being used. Then you can follow the docs for making a custom template.
  
  It is not difficult to do this, but it is not ideal because if the template gets updated, yours will be left behind.
  
  It would be better to add some custom css so that the select2's are made to look like the other select boxes. However I have never found a quick or easy way of adding custom CSS to Civi. If you are already using a custom Drupal theme you could add the CSS to your theme. Otherwise the template method is probably the best way to go.
  
  
  ---
  
  ### Answer by username_2 on 2017-07-11. Score: 0
  
  is there a way to disable select2 in CiviCRM pages? e.g. contribution pages.
  
  We added this to the footer of the page to no avail: -
  `CRM.$('.crm-select2').select2('destroy');`
  
  It is the core code that dictates the styling of some fields?
  
  
  ---
  
  