My JavaScript is triggered correctly, but I cannot attach to the change event for a drop down list in CiviCRM.

The ID of the actual select element is "custom_385_14".

I am trying to attach an event to a drop down list in CiviCRM, which populates the "Subject" field of an Activity with the value from the drop down list.

The actual input element doesn't seem to trigger the change event when the list value is changed. I've tried the following:-

$("#custom_385_14").change(function() {

******* UPDATE ********* So thanks to Jon G pointing out Chosen isn't the library used, but Select2. According to their docs: https://select2.org/programmatic-control/events#listening-for-events I should use the following:-

  $('#custom_385_14').on('select2:select', function (e) {

However this is still not triggering the event.

I have searched the developer docs for civi and couldn't find an example of this, just a link to the Select2 docs here: https://docs.civicrm.org/dev/en/latest/framework/quickform/entityref/#select2

HTML Source below for the <td> containing the select list:-

 <td class="html-adjust">
      <div class="select2-container crm-select2 crm-form-select select2-allowclear" id="s2id_custom_385_14" style="width: 200px;"><a href="javascript:void(0)" class="select2-choice" tabindex="-1">   <span class="select2-chosen" id="select2-chosen-9">standard</span><abbr class="select2-search-choice-close"></abbr>   <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen9" class="select2-offscreen">tutorial type</label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-9" id="s2id_autogen9"></div><select class="crm-select2 crm-form-select" data-crm-custom="Tutorial_fee_details:tutorial_type" data-api-entity="Activity" data-api-field="custom_385" data-option-edit-path="civicrm/admin/options/tutorial_type_20180704095928" name="custom_385_14" id="custom_385_14" tabindex="-1" title="tutorial type" style="display: none;">
    <option value="">- none -</option>
    <option value="1" selected="selected">introduction</option>
    <option value="2">standard</option>
    <option value="3">portfolio review</option>
<a href="/civicrm/admin/options/tutorial_type_20180704095928?reset=1" class="crm-option-edit-link medium-popup crm-hover-button" target="_blank" title="Edit Options" data-option-edit-path="civicrm/admin/options/tutorial_type_20180704095928"><i class="crm-i fa-wrench"></i></a>

How can I use Jquery code to watch for when the values change in CiviCRM drop down lists?


2 Answers 2


You cannot always predict the id or name for custom field for an activity, it is either custom_385_14(incase of saved custom field for activity where 14 is id from custom value table) or custom_385_-1 incase of new one.

I always follow below snippet to work incase of custom field and it does call my change event when i change option from select dropdown. I believe you choosed wrong id to actually call change event.

CRM.$(function($) {
  $("div#customData select[data-api-field='custom_385']").change(function() {


Try after installing the extension https://github.com/pradpnayak/org.civicrm.jsoncaseactivity . I have added the JS in https://github.com/pradpnayak/org.civicrm.jsoncaseactivity/blob/master/templates/CRM/Case/Form/Activity.extra.tpl



  • Sorry but that doesn't seem to do anything, Pradeep. I'm using drupal theme, attaching JS file. Do I need to add this to a custom Civi JS file instead?
    – Darren
    Jul 12, 2018 at 15:27
  • On which form are you trying to add JS to? Jul 12, 2018 at 15:29
  • It's on the Case - Activity - Edit screen.
    – Darren
    Jul 12, 2018 at 17:58
  • Voted this answer down, as I was't having problems initiating JQuery. The question is how to trigger an event from the drop down list changing.
    – Darren
    Jul 12, 2018 at 19:14
  • In what sense my answer is wrong? I am not convinced how are you trying to achieve this. Are you using correct select field id? You have provided limited information and we still trying to help you as a pro bono. Jul 12, 2018 at 19:17

I have struggled in the past to add JS behaviours to elements rendered by CiviCRM. But then I came across "extra templates" as described here. https://civicrm.org/blog/dave-greenberg/now-its-easier-add-custom-behaviors-templates and I have had success with that method.

You can put them in your configured Custom Templates directory or you can put them in a CiviCRM extension.

I don't think they work if you put them in a Drupal module, however.

  • Thanks for that pointer, Naomi. Looks promising. Will report back.
    – Darren
    Jul 12, 2018 at 18:01
  • OK, that's now inserting the code in the right place, but still not detecting a change to the drop down list value.... I'll update the question with more details.
    – Darren
    Jul 12, 2018 at 18:41
  • Voted this answer down, as I was't having problems initiating JQuery. The question is how to trigger an event from the drop down list changing.
    – Darren
    Jul 12, 2018 at 19:14
  • 2
    @Darren - you're not going to get much help on this site or from this community if you downvote anything that doesn't exactly solve your problem. No-one is obliged to help you but Naomi & Pradeep have kindly offered suggestions to help you resolve your issues. From your initial post it's not clear that your js is even being loaded or run.
    – Aidan
    Jul 13, 2018 at 7:43
  • 2
    @Darren Both answers were relevant to your original question given the limited information you provided. You need the right jQuery to work with select2, and you need to make it work in the CiviCRM context. You have the select2 documentation example which should take care of the jQuery part. Pradeep was showing you how to use the enclosure correctly for Civi and Naomi was talking about how you get your js added within Civi. These answers are also not just for your benefit but for those encountering similar issues. Just say what worked for you - no need to downvote.
    – Aidan
    Jul 13, 2018 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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