Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-18T19:18:31.087Z
Answers.Text: 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..
Answers.UserDisplayName: Niels
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-18T20:55:22.847Z
Answers.Text: 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!
Answers.UserDisplayName: Niels
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-05-18T18:39:17.337Z
Answers.LastActivityDate: 2020-05-18T18:39:17.337Z
Answers.UserDisplayName: James Smith
Body: <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>
  
Tags: <craft3><ajax><elementquery><jquery>
Title: Dynamically populating select input fields using jquery $.load and twig template
ThreadText: # 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() %}      
  
  <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 %}
  
  ```
  
  **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!  
  
  ---
  
  