I have two examples of how to fill the value of a dropdown field with the help of JavaScript, but can’t make either of them work. Can somebody show me what I’m doing wrong?

Context:

• We are pre-filling a form with information we already have about a client, and using the form to help elicit additional information.
• The information we already have is pulled from crm using a workflow and stored in an external table.
• Lookup rules fill the form fields from the external tables.
• We have three dropdown fields, the simplest being Gender.
• We want to keep the dropdown choices as well as set the correct gender value from crm data, but can’t get it to work.
• On this field, we fill the choices (Male, Female) with a lookup rule pulling from an external table.
• We use a hidden single line text field to initially store the client’s gender value.
• The approach is, using JavaScript, to get the crm value from the hidden field and set the value of the dropdown with it. After the code runs, the choices are there, but the value from crm is not. (We have verified that the value of the hidden field gets set properly.)

Example 1. Here the hidden field's variable is genderPrimaryCRM; the dropdown field's variable is genderPrimary; and primaryGenderLocal is a third variable used to help move the value. (The function is called in a refresh routine.)

function UpdateDropDowns(){
  
  var primaryGenderLocal = $(".genderPrimaryCRM input").val();
  $(".genderPrimary select").val(primaryGenderLocal);
  
}

Example 2. Is a code snippet provided by Jim Brannen on 7.18.20 as an answer to the same question as mine. (https://answers.laserfiche.com/questions/175201/Forms--How-do-you-populate-a-field-with-existing-value-without-losing-the-choices). I substituted .genderPrimaryCRM for #q2 and .genderPrimary for #q1. But it's not working for me either.

$(document).on("change", "#q2 input", function() {
  $("#q1 select").val($("#q2 input").val()).change();
});

Appreciate any advice. Thanks!

EDIT 1: 

Wrestling further with this, I have finally gotten it to work. I was mistakenly using Forms variable names when I should have been using CSS class names in my JSS code. A third example from Sheldon in 2015 (https://answers.laserfiche.com/questions/71492/Select-a-value-from-a-drop-down-list-that-is-being-filled-by-a-lookup-condition) was also very helpful.

Here's Sheldon's code with my class name substitutions:

$(document).ready(function () {
   $('.genderPrimaryCrm').change(grabVal);
});

function grabVal() {

  var s = $('.genderPrimaryCrm input').val();  
    
  var a = '';
  a = $('.genderPrimaryClass option').filter(function () { return $(this).html() == s; }).prop('selected', true);
     
}

The Brannen and Sheldon examples both now work for me, but not Example 1. Even though I’ve gotten examples 2 and 3 to work, I still do not fully understand how select works with a Forms dropdown field, how the “choice” and “value” of a selection need to be handled, why .change() is necessary, and when to use option versus select. Will be trying to read up on all that at https://doc.laserfiche.com/laserfiche.documentation/en-us/Subsystems/ProcessAutomation/Content/Forms-Current/Javascript-and-CSS/Javascript%20Selectors.htm#top. If anybody is willing to offer explanatory comments, I’d really appreciate it. Thanks.