jQuery trouble linking two select drop-downs

[dudeval]

I am trying to create a link between link between two select elements on a form such that when the user chooses a result from one drop-down, a corresponding result is assigned to another drop-down list on the page.

I've been able to create this functionality between two basic select menus, but when I try applying it to the actual civicrm custom field I want it to work with, it stops functioning. The only difference I can find between my test case and the actual implementation is that the civicrm custom field dropdown is a select2 whereas I was testing with a basic html select dropdown before.

I can assign a value to the civicrm custom field when the page loads, but I can't get it to change the value of the custom field based on another selection. Any thoughts? Or glaring oversights I'm made?

many thanks

Code: [Select]

<select id="triggerSelect">
  <option value="1">Option1</option>
  <option value="2">Option2</option>
  <option value="3">Option3</option>
  <option value="4">Option4</option>
</select>

<select id="destSelect">
  <option value="a">OptionA</option>
  <option value="b">OptionB</option>
  <option value="c">OptionC</option>
  <option value="d">OptionD</option>
</select>

<script type="text/javascript">
{literal}

 cj("#triggerSelect").on('change', function(){
   var selected_value = cj("#triggerSelect").val();
   // this test case works fine and does change the destSelect menu as expected
   if (selected_value == '1') { cj("#destSelect").val('a'); }
   if (selected_value == '2') { cj("#destSelect").val('b'); }
   if (selected_value == '3') { cj("#destSelect").val('c'); }
   if (selected_value == '4') { cj("#destSelect").val('d'); }

   // this is what I'm actually trying to change, and the contribution_campaign_id doesn't react to the selection from triggerSelect
   if (selected_value == '1') { cj("#contribution_campaign_id").val('1');}
   if (selected_value == '2') { cj("#contribution_campaign_id").val('2');}
   if (selected_value == '3') { cj("#contribution_campaign_id").val('3');}
   if (selected_value == '4') { cj("#contribution_campaign_id").val('4');}
 });

{/literal}
</script>


[Coleman Watts]

A couple notes on your code:

• cj is deprecated in favor of CRM.$, and in general try to avoid unenclosed code. A simple closure you can use is

Code: [Select]

CRM.$(function($) {... }); this allows you to reference jQuery as $ inside your code. [/li]
[li]Probably select2 is not recognizing the update because you don't trigger change on it when changing. Try adding [/li][/list]

Code: [Select]

$("#contribution_campaign_id").trigger('change')

at the end.[/li]

• Documentation and examples at http://wiki.civicrm.org/confluence/display/CRMDOC/Javascript+Reference

[dudeval]

Coleman, you're brilliant! Thank you, I've been banging my head against this for the better part of a day now.

And thanks for the tip on new jQuery format, I'll start adopting it.