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

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

    });

{% 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

----------------------------update-------------------

I've modified the JS to this:

 $("#first-choice").change(function() {

  $.ajax({

    url: "{{ distUrl }}data.twig?brand=" + $("#first-choice").val(),

    success: function(newHTML, textStatus, jqXHR) {
      $(newHTML).appendTo("#second-choice").val();
    },

    error: function(jqXHR, textStatus, errorThrown) {
      // Handle AJAX errors
    }

  });

  return false;
});

Which gives me the error:

Error: Syntax error, unrecognized expression: {% 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 %}

EDIT: the below code now works!

I have two select inputs, the choice of 1 should populate the second. I have an external twig file (data.twig) (MAKE SURE TO PUT THIS IN YOUR TEMPLATES FOLDER) that loads the options of the second field.

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

    });

{% 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 %}

----------------------------update-------------------

I've modified the JS to this:

 $("#first-choice").change(function() {

  $.ajax({

    url: "{{ distUrl }}data.twig?brand=" + $("#first-choice").val(),

    success: function(newHTML, textStatus, jqXHR) {
      $(newHTML).appendTo("#second-choice").val();
    },

    error: function(jqXHR, textStatus, errorThrown) {
      // Handle AJAX errors
    }

  });

  return false;
});

Which gives me the error:

Error: Syntax error, unrecognized expression: {% 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 %}