title: querySelectorAll to get selected values of dropdowns
body: <p>I want to use querySelectorAll to get the selected values for multiple dropdowns on my page, then print them elsewhere on the page. </p>
  
  <p>I'm struggling to find the right way to do this because they all have different names ('dropDown[0]' and 'dropDown[1]' ect). I can't change the naming convention, so i need to find a way of selecting all dropdowns that have 'dropDown' in the name, then print the values separated by a comma. </p>
  
  <p>This is what i've tried so far: </p>
  
  <pre><code>const dropDowns = document.querySelectorAll('select[name="dropDown"]')
  if (!dropDowns) return
  this.dropDown = dropDowns.options[dropDowns.selectedIndex].text
  this.dropDown.join(', ')
  
  &lt;div class="form-group"&gt;
    &lt;label for="dropDown1"&gt;Dropdown 1:&lt;/label&gt;
    &lt;select name="dropDown[0]" id="dropDown1" class="form-control"&gt;
      &lt;option value="D20"&gt;Option 1&lt;/option&gt;
      &lt;option value="T20"&gt;Option 2&lt;/option&gt;
      &lt;option value="T11"&gt;Option 3&lt;/option&gt;
      &lt;option value="S10"&gt;Option 4&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;label for="dropDown2"&gt;Dropdown 2:&lt;/label&gt;
    &lt;select name="dropDown[1]" id="dropDown2" class="form-control"&gt;
      &lt;option value="D20"&gt;Option 1&lt;/option&gt;
      &lt;option value="T20"&gt;Option 2&lt;/option&gt;
      &lt;option value="T11"&gt;Option 3&lt;/option&gt;
      &lt;option value="S10"&gt;Option 4&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>