JavaScript: only first object selected from drop-down box logs to console

equanimity 0
Viewed 26

I have a drop-down menu and I'd like to log when the value of the selection changes. Currently, only the first element is being logged to the console. Here is my code:

HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <title>Example</title>

    </head>
    <body>


    <div class="container-fluid">

        <!-- header -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Example</h1>
            </div>
        </div>

        <!-- drop-down -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <div class="user-control">
                    <div class="form-group">
                        <select id="categories" class="form-control">
                            <option value="All Categories">All Categories</option>
                            <option value="Category 1">Category 1</option>
                            <option value="Category 2">Category 2</option>
                            <option value="Category 3">Category 3</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

    <script src="my_js.js"></script>
    </body>
</html>

JavaScript:

let select = document.getElementById("categories");
let value = select.options[select.selectedIndex].value;
console.log(value)

Why am I not able to see anything other than "All Categories"?

enter image description here

Thanks!

javascript html
2 Answers

Wrap it in a listener. IE:

select.addEventListener('change', e => {
  let value = select.options[select.selectedIndex].value;
  console.log(value)
})


let select = document.getElementById("categories");
select.addEventListener('change', e => {
  let value = select.options[select.selectedIndex].value;
  console.log(value)
})
<div class="container-fluid">

  <!-- header -->
  <div class="row justify-content-center">
    <div class="align-self-center">
      <h1>Example</h1>
    </div>
  </div>

  <!-- drop-down -->
  <div class="row justify-content-center">
    <div class="align-self-center">
      <div class="user-control">
        <div class="form-group">
          <select id="categories" class="form-control">
            <option value="All Categories">All Categories</option>
            <option value="Category 1">Category 1</option>
            <option value="Category 2">Category 2</option>
            <option value="Category 3">Category 3</option>
          </select>
        </div>
      </div>
    </div>
  </div>

Kinglish0

Your code works but only when the page loads. Adding your existing code inside an event listener is what your looking for!

const dropdown = document.getElementById('categories');

dropdown.addEventListener('change', (e) => {
  let select = document.getElementById("categories");
  let value = select.options[select.selectedIndex].value;
  console.log(value)
});
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <title>Example</title>

    </head>
    <body>


    <div class="container-fluid">

        <!-- header -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <h1>Example</h1>
            </div>
        </div>

        <!-- drop-down -->
        <div class="row justify-content-center">
            <div class="align-self-center">
                <div class="user-control">
                    <div class="form-group">
                        <select id="categories" class="form-control">
                            <option value="All Categories">All Categories</option>
                            <option value="Category 1">Category 1</option>
                            <option value="Category 2">Category 2</option>
                            <option value="Category 3">Category 3</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

    <script src="my_js.js"></script>
    </body>
</html>

JDawwgy0
Related