CiviCRM Community Forums (archive)

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

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