I've done a lot of searching for this but can't find a conclusive answer. My jquery knowledge is just not good enough to rewrite the function unfortunately, so hopefully someone can help..

I have two select inputs, the choice of 1 should populate the second. I have an external twig file (data.twig) that loads the options of the second field. Right now, I can successfully load static options, but it won't execute any entry elements, I guess the .load command doesn't do that, just not sure how to properly use .ajax or .get to get it working..

 {% set allBrands = craft.entries()
            .section('brands')
            %}

{% set brands = allBrands.all() %}      
     
<div class="modal-page-display w-container">
  <div class="modal-page-wrapper text-left" style="min-width: 500px;">
  <h3 class="heading">test form</h3>

    <select id="first-choice" class="select-1">
        <option selected value="base">Please Select</option>
        {% for entry in brands %}
        <option value="{{ entry.brandName }}">{{ entry.brandName }}</option>
        {% endfor %}
    </select>

    

    <select id="second-choice" class="select-1">
        <option>Please choose from above</option>
    </select>

  </div>
</div>

Then for the javascript:

$(function() {
        
        $("#first-choice").change(function() {
          $("#second-choice").load("{{ distUrl }}data.twig?brand=" + $("#first-choice").val());
        });

    });

And lastly the data.twig:

{% set brand = craft.request.getParam('brand') %}

{% set allModels = craft.entries()
                .section('brands')
                .brandName(brand)
                %}
{% set models = allModels.all() %}  
{% for entry in models %}   
<option>{{ entry.modelName }}</option>
<option>testing</option>
{% endfor %}

So right now, whichever option I choose as first choice, the second select field gets populated with {{ entry.modelName }} testing

When I go straight to data.twig?brand=whatever then I get a proper html readout with two value