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?


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(){};
  • 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
    – Jon-man
    Jul 20 '17 at 15:37

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.


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


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.


Coleman 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.

  • 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.
    – Coleman
    Nov 21 '16 at 20:50
  • I ran into this in a few locations: Codeception/Selenium/Firefox with WebDriver's selectOption, and with Fake.app 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! Nov 21 '16 at 21:11

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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.