Return to Question

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() {
            alert('test!');
           $("#subject").val($("#custom_385_14").val());
        });

******* 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) {
      alert('changed!');
  });

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

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

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() {
            alert('test!');
           $("#subject").val($("#custom_385_14").val());
        });

******* 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) {
      alert('changed!');
  });

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>
</select> 
<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>
          </td>

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

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() {
            alert('test!');
           $("#subject").val($("#custom_385_14").val());
        });

I see that Chosen is being used to render the list, but if I add .chosen() to anywhere I get a "chosen undefined" error.

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

******* 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) {
      alert('changed!');
  });

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

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() {
            alert('test!');
           $("#subject").val($("#custom_385_14").val());
        });

******* 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) {
      alert('changed!');
  });

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

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

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() {
            alert('test!');
           $("#subject").val($("#custom_385_14").val());
        });

I see that Chosen is being used to render the list, but if I add .chosen() to anywhere I get a "chosen undefined" error.

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

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() {
            alert('test!');
           $("#subject").val($("#custom_385_14").val());
        });

I see that Chosen is being used to render the list, but if I add .chosen() to anywhere I get a "chosen undefined" error.

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

******* 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) {
      alert('changed!');
  });

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