Dynamically populating select input fields using jquery $.load and twig template

Question

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.

 {% 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("{{ siteUrl }}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 %}

Answer 1

Your code looks fine and worked for me when testing locally. However it could be failing due to the fact that you're not url-encoding the parameter before you send the request. If the values contain spaces or other special characters, for example, this would make it fail. To fix that issue, try using encodeURI() like this:

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

This works for me when testing with values that contain spaces at least.