文章/答案/技术大牛

发布

社区首页 >问答首页 >JavaScript:只有从下拉框日志中选择到控制台的第一个对象。

问JavaScript:只有从下拉框日志中选择到控制台的第一个对象。
EN

Stack Overflow用户

提问于 2022-09-12 21:25:44

回答 2查看 27关注 0票数 0

我有一个下拉菜单，当选择的值发生变化时，我想记录一下。目前，只有第一个元素被记录到控制台。这是我的代码：

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)

为什么除了“所有类别”之外，我什么都看不见？

谢谢!

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-09-12 21:29:33

把它包在一个侦听器里。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>

票数 2

Stack Overflow用户

发布于 2022-09-12 21:32:14

您的代码只在页面加载时才能工作。在事件侦听器中添加现有代码是您所需要的！

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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73695407

复制

相似问题

问JavaScript:只有从下拉框日志中选择到控制台的第一个对象。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:只有从下拉框日志中选择到控制台的第一个对象。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JavaScript:只有从下拉框日志中选择到控制台的第一个对象。
EN