javascript，我是javascript的新手，从下拉列表中的值我需要更改类

Question

请告诉我如何通过下拉列表将值转移到另一个页面

<select id="checkOpt" >
<option value="Win">Win</option>
<option value="Def">Def</option>
<option value="Play">Play</option>
</select>

我是新的javascript，从值从下拉列表我需要改变类

const classColor = document.getElementById('classColor');
const checkOpt   = document.getElementById('checkOpt');
if (checkOpt.option == "Win") {
classColor.classList.add('myb-SettledBetParticipant_Won');
classColor.classList.remove('myb-SettledBetParticipant_Lost');
}
if (checkOpt.option == "Def") {
classColor.classList.add('myb-SettledBetParticipant_Lost');
classColor.classList.remove('myb-SettledBetParticipant_Won');
} else if (checkOpt.option == "Play") {
};

我尝试了很多变化，不断出错

不能读取null属性(读取'classList')

我不完全理解逻辑，犯了一个错误，我不知道具体在哪里

也许需要做一遍，但是我在任何地方都找不到详细的信息

<div id="classColor" class="myb-SettledBetParticipant myb-SettledBetParticipant_Lost ">

位于另一页

Answer 1

从下拉列表中选择的值到另一个页面，您可以使用带有隐藏输入字段的表单元素来保存所选值。然后，在提交表单时，您可以使用请求对象访问另一个页面上的值。在第一页:

<form action="second_page.html" method="GET">
<select id="checkOpt" name="checkOpt">
<option value="Win">Win</option>
<option value="Def">Def</option>
<option value="Play">Play</option>
</select>
<button type="submit">Submit</button>
<input type="hidden" name="classColor" id="classColorInput">
</form>
<script>
const classColor = document.getElementById('classColor');
const checkOpt = document.getElementById('checkOpt');
const classColorInput = document.getElementById('classColorInput');
checkOpt.addEventListener('change', (event) => {
const selectedOption = event.target.value;
if (selectedOption === 'Win') {
classColor.classList.add('myb-SettledBetParticipant_Won');
classColor.classList.remove('myb-SettledBetParticipant_Lost');
} else if (selectedOption === 'Def') {
classColor.classList.add('myb-SettledBetParticipant_Lost');
classColor.classList.remove('myb-SettledBetParticipant_Won');
} else {
classColor.classList.remove('myb-SettledBetParticipant_Lost');
classColor.classList.remove('myb-SettledBetParticipant_Won');
}
classColorInput.value = selectedOption;
});
</script>

在第二页，您可以使用请求对象访问checkOpt和classColor的值。例如，在PHP中:

<?php
$checkOpt = $_GET['checkOpt'];
$classColor = $_GET['classColor'];
?>

Answer 2

<select id="checkOpt">
<option value="Win">Win</option>
<option value="Def">Def</option>
<option value="Play">Play</option>
</select>
<div id="classColor">Change my class</div>
<script>
const classColor = document.getElementById('classColor');
const checkOpt = document.getElementById('checkOpt');
checkOpt.addEventListener('change', () => {
const selectedOption = checkOpt.value;
if (selectedOption === "Win") {
classColor.classList.add('myb-SettledBetParticipant_Won');
classColor.classList.remove('myb-SettledBetParticipant_Lost');
} else if (selectedOption === "Def") {
classColor.classList.add('myb-SettledBetParticipant_Lost');
classColor.classList.remove('myb-SettledBetParticipant_Won');
} else if (selectedOption === "Play") {
classColor.classList.remove('myb-SettledBetParticipant_Won');
classColor.classList.remove('myb-SettledBetParticipant_Lost');
}
});
</script>
check this maybe this will help you