<p>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 <code>encodeURI()</code> like this:</p>

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

<p>This works for me when testing with values that contain spaces at least.</p>

CC BY-SA 4.0
2020-05-18T19:18:31.087Z
Thank you so much for having a look, you wouldn't believe the time I've spent on this already.. I can't believe it works for you! I added your suggestion, but still just get the full twig code pulled, instead of them being executed beforehand.. 

When I inspect the second <select> after choosing a first-choice, I see the whole {% set brand %} etc. being pulled in the form document..
Niels
CC BY-SA 4.0
2020-05-18T20:55:22.847Z
I've found out what I did wrong.. I had put the data.twig file outside of my templates folder... (I used JSON first, then replaced the contents of the file to make it work with craft entries, and forgot to move the file)..

Still a huge thanks for helping me, because the fact that it worked for you kept me pushing through!
Niels
CC BY-SA 4.0
2020-05-18T18:39:17.337Z
2020-05-18T18:39:17.337Z
James Smith
<p>EDIT: the below code now works!</p>

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

<pre><code> {% set allBrands = craft.entries()
            .section('brands')
            %}

{% set brands = allBrands.all() %}      

&lt;div class="modal-page-display w-container"&gt;
  &lt;div class="modal-page-wrapper text-left" style="min-width: 500px;"&gt;
  &lt;h3 class="heading"&gt;test form&lt;/h3&gt;

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



    &lt;select id="second-choice" class="select-1"&gt;
        &lt;option&gt;Please choose from above&lt;/option&gt;
    &lt;/select&gt;

  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Then for the javascript:</p>

<pre><code>$(function() {

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

    });
</code></pre>

<p>And lastly the data.twig:</p>

<pre><code>{% set brand = craft.request.getParam('brand') %}

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

<craft3><ajax><elementquery><jquery>
Dynamically populating select input fields using jquery $.load and twig template
# Dynamically populating select input fields using jquery $.load and twig template

(Asked by: username_0 on 2020-05-18)

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() %}      


  
  test form

    
        Please Select
        {% for entry in brands %}
        {{ entry.brandName }}
        {% endfor %}
    



    
        Please choose from above
    

  


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 %}   
{{ entry.modelName }}
testing
{% endfor %}

**Tags:** craft3, ajax, elementquery, jquery

---

## 1 answers

### Answer by username_1 on 2020-05-18. Score: 3 | Accepted answer

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.

> **Comments:**
> **username_0**: Thank you so much for having a look, you wouldn't believe the time I've spent on this already.. I can't believe it works for you! I added your suggestion, but still just get the full twig code pulled, instead of them being executed beforehand..   When I inspect the second <select> after choosing a first-choice, I see the whole {% set brand %} etc. being pulled in the form document..  
> **username_0**: I've found out what I did wrong.. I had put the data.twig file outside of my templates folder... (I used JSON first, then replaced the contents of the file to make it work with craft entries, and forgot to move the file)..  Still a huge thanks for helping me, because the fact that it worked for you kept me pushing through!  

---

