Dynamic dropdown filter

• 

  infohighrev · Member · Mar 26, 2023 at 6:56 pm

  • Copy link
  • Add topic to favorites

  Hello, I need help to creating a dynamic dropdown filter. I have a code with javascript function and it works in visual studio or code testing website, but in wordpress it doesn’t want to work properly. The javascript part doesn’t work in wordpress and I don’t know what to do. I am new to website creating so I would be very helpful is somebody would figure it out. The code is very simpal and it was like an example to test if it works and even the simple doesn’t work… I will attach the code:

  <form>
      <label for="make">Make:</label>
      <select name="make" id="make">
          <option value="">Select a make</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
          <option value="mercedes">Mercedes</option>
          <!-- add more options as needed -->
      </select>
  
      <label for="type">Type:</label>
      <select name="type" id="type">
          <option value="">Select a type</option>
          <option value="sedan">Sedan</option>
          <option value="suv">SUV</option>
          <option value="coupe">Coupe</option>
          <!-- add more options as needed -->
      </select>
  
      <label for="year">Year:</label>
      <select name="year" id="year">
          <option value="">Select a year</option>
          <option value="2023">2023</option>
          <option value="2022">2022</option>
          <option value="2021">2021</option>
          <!-- add more options as needed -->
      </select>
  
      <label for="model">Model:</label>
      <select name="model" id="model">
          <option value="">Select a model</option>
          <!-- add models for each make as needed -->
      </select>
  
      <button type="submit">Search</button>
  </form>
  
  <script>
    const makeDropdown = document.getElementById('make');
    const modelDropdown = document.getElementById('model');
    const modelsByMake = {
      audi: ['A1', 'A3', 'A4', 'A5', 'A6'],
      bmw: ['1 Series', '2 Series', '3 Series', '4 Series', '5 Series'],
      mercedes: ['A-Class', 'C-Class', 'E-Class', 'S-Class']
      // add more models for each make as needed
    };
  
    makeDropdown.addEventListener('change', function() {
      const selectedMake = makeDropdown.value;
      const models = modelsByMake[selectedMake];
      updateModelsDropdown(models);
    });
  
    function updateModelsDropdown(models) {
      modelDropdown.innerHTML = ''; // clear current options
  
      if (models && models.length) {
        for (const model of models) {
          const option = document.createElement('option');
          option.value = model.toLowerCase().replace(' ', '-');
          option.textContent = model;
          modelDropdown.appendChild(option);
        }
      } else {
        const option = document.createElement('option');
        option.textContent = 'Select a make first';
        modelDropdown.appendChild(option);
      }
    }
  </script>

• 

  aleone89 · Staff · Mar 30, 2023 at 12:52 pm

  • Copy link

  Hello there,

  Many thanks for reaching out.

  Are you able to confirm the URL of the website that you need assistance with please?