Pre-select item on select list that is dynamically populated by a related select

Question

This is using jquery and ColdFusion. I have two selects on a page - general and major (general category, majors in that category).

<form>
  <div class="course">
    <div class="row">
      <select name="general[]" class="general">
        <option value="">--- Select a General Interest ---</option>
        <cfoutput query="qryCipMajor">
          <option value="#qryCipMajor.stm_cip_fam#"<cfif qryCipMajor.stm_cip_fam EQ cipFam1> selected="selected"</cfif>>#qryCipMajor.stm_major_new# (#qryCipMajor.stm_cip_fam#)</option><!--- cip_name --->
        </cfoutput>
      </select>
    </div>
    <div class="row">
      <select name="major[]" class="major">
        <option value=""></option>
      </select>
    </div>
  </div>
</form>

There are 5 of these on the page. The cipFam1 (and cipFam2 etc.) variable is set based on what is stored for the user and lets the general select be pre-selected.

If nothing is saved it works fine. User selects a general category and the majors for that category are filled in the related selected. If there's a saved selection the general category is pre-selected correctly, but I can't figure out how to get the majors to pre-load for that category and for the major itself to be pre-selected. The jquery looks like this.

$(".general").change(function() {
  var selected = $(this).val();
  if(selected == "") return;
    var $major = $(this).closest('.course').find('.major').empty().append('<option value="">-- Select a Majors --</option>');

    $.getJSON(apiPath + "/majorsCFC.cfc?method=queryCipMajorRemote&returnformat=json",{"stm_cip_fam":selected}, function(res,code) {
        for (var i = 0; i < res.length; i++) {
              $major.append($('<option/>', {
                value: res[i].ID,
                text: res[i].NAME
              }));
        };
    });
});

I am far from a jQuery expert and could really use some pointers here on how to 1) pre-load the majors list if a general category has been saved and then 2) pre-select the saved major.

I know the mechanics of jQuery specifying a selected element using 'select' and '.val' - but need an idea of how to incorporate it on a dynamically populated list. I'm thinking that if there is a value for cipFam1 and it's not blank to use that to pass the id of the major to a separate jquery function, but that doesn't pre-populate the list with all of the options in that category.

Possible duplicate of [Set select option 'selected', by value](https://stackoverflow.com/questions/13343566/set-select-option-selected-by-value) — rrk, Jan 30 '19 at 15:17
I know how to set the value ($("div.id_100 select").val("val2");) from the link above, but not sure if I need a separate function that fires if there's a pre-existing value or what. — Steve, Jan 30 '19 at 15:19

score 1 · Accepted Answer · answered Feb 02 '19 at 02:08

Use a data-* attribute to store the saved value for each list

<select name="major[]" class="major" data-preselectedid="1234">

Then use it to pre-select the appropriate option, after populating the list:

$.getJSON( 
    // ... 
    $major.val($major.data("preselectedid"));
});

To pre-load the .major lists, trigger the "change" event when the document loads

$( document ).ready(function() {
   $(".general").change(function(){
     // ...
   });

   $(".general").trigger("change");
});

Pre-select item on select list that is dynamically populated by a related select

1 Answers1