Html Question posted in
Some basic documentation can be found here.

Html – Event listener not working on <select> element

The "change" event listener is not responding in the browser

// mobile options
const selectElement = document.querySelector(select)

let spices = document.querySelector(".spices")
let milletAndPorridges = document.querySelectorAll(".millet")
let healthSupplements = document.querySelectorAll(".health")

let spicesProducts = document.querySelectorAll("")
let milletProducts = document.querySelectorAll("")
let healthSupplementProducts = document.querySelectorAll("")

selectElement.addEventListener('change', function(event) {
    const selectedValue = event.target.value

    if (selectedValue === spices) {
        // this is just for testing purposes
        alert('SPice')
    }
})
<div class="sorting">
    <select name="" class="">
        <option value="default" class="default">Sort by Category</option>
        <option value="default" class="spices">Spices</option>
        <option value="sort-by-price" class="millets">Porridges & Millets</option>
        <option value="sort-by-popularity" class="health">Health Supplements</option>
    </select>
</div>

I tried the above javascript which didn’t work, I also tried using a forEach loop on every option and adding a click listener to each option which didn’t work also.

Tags:

3

Answers


  1. 0

    bro, in your first line maybe you miss surround the string select.

    // wrong
const selectElement = document.querySelector(select)
// right
const selectElement = document.querySelector("select")
    Login or Signup to reply.
  2. 0

    Clean up the event listener then decide how to use the value.

    Here I added a class just to be clear.

    const myselect = document.querySelector('select.my-select');
myselect.addEventListener('change', function(event) {
  const selectedValue = event.target.value;
  console.log('Value:', this.value, ' Other way:', selectedValue);

  //decide what to do with the value here....
});
    <div class="sorting">
  <select name="" class="my-select">
    <option value="default" class="default">Sort by Category</option>
    <option value="spicy" class="spices">Spices</option>
    <option value="sort-by-price" class="millets">Porridges & Millets</option>
    <option value="sort-by-popularity" class="health">Health Supplements</option>
  </select>
</div>
    Login or Signup to reply.
  3. 0 
    // mobile options
const selectElement = document.getElementsByName('drop_select')[0];
//changed .querySelector(select) to .getElementsByName('drop_select')[0]

let spices = document.querySelector(".spices")
let milletAndPorridges = document.querySelectorAll(".millet")
let healthSupplements = document.querySelectorAll(".health")

// let spicesProducts = document.querySelectorAll("")
// let milletProducts = document.querySelectorAll("")
// let healthSupplementProducts = document.querySelectorAll("")
//commented the above as it was giving warnings...
selectElement.addEventListener('change', function(event) {
    const selectedValue = event.target.value;

    if (selectedValue === 'spices') {
        // this is just for testing purposes
        alert('SPice')
    }
})
    <div class="sorting">
        <select name="drop_select" class="">
            <option value="default" class="default">Sort by Category</option>
            <option value="spices" class="spices">Spices</option>
            <!-- changed the value for spices -->
            <option value="sort-by-price" class="millets">Porridges & Millets</option>
            <option value="sort-by-popularity" class="health">Health Supplements</option>
        </select>
    </div>

    HTML changes

    <div class="sorting">
        <select name="drop_select" class="">
            <option value="default" class="default">Sort by Category</option>
            <option value="spices" class="spices">Spices</option>
            <!-- changed the value for spices -->
            <option value="sort-by-price" class="millets">Porridges & Millets</option>
            <option value="sort-by-popularity" class="health">Health Supplements</option>
        </select>
    </div>

    The changes in JS

    // mobile options
const selectElement = document.getElementsByName('drop_select')[0];
//changed .querySelector(select) to .getElementsByName('drop_select')[0]

let spices = document.querySelector(".spices")
let milletAndPorridges = document.querySelectorAll(".millet")
let healthSupplements = document.querySelectorAll(".health")

// let spicesProducts = document.querySelectorAll("")
// let milletProducts = document.querySelectorAll("")
// let healthSupplementProducts = document.querySelectorAll("")
//commented the above as it was giving warnings...
selectElement.addEventListener('change', function(event) {
    const selectedValue = event.target.value;

    if (selectedValue === 'spices') {
        // this is just for testing purposes
        alert('SPice')
    }
})

    Here are the changes that you need to do.

    Upvote the answer if you found it helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search