我有一個下拉選單，我想在選擇的值發生變化時記錄下來。目前，只有第一個元素被記錄到控制臺。這是我的代碼：
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)
為什么我看不到“所有類別”以外的任何內容？
謝謝！
uj5u.com熱心網友回復：
將其包裝在偵聽器中。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>uj5u.com熱心網友回復：
您的代碼有效，但僅在頁面加載時有效。在事件偵聽器中添加現有代碼是您所尋找的！
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506648.html
標籤：javascript html