在下拉列表1中选中值时,可以通过以下几种方式来更改下拉列表框的内容:
示例代码:
// HTML
<select id="dropdown1" onchange="changeDropdown2()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="dropdown2">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
// JavaScript
function changeDropdown2() {
var dropdown1 = document.getElementById("dropdown1");
var dropdown2 = document.getElementById("dropdown2");
// 根据选中的值修改下拉列表框的内容
if (dropdown1.value === "option1") {
dropdown2.innerHTML = `
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
`;
} else if (dropdown1.value === "option2") {
dropdown2.innerHTML = `
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
`;
} else if (dropdown1.value === "option3") {
dropdown2.innerHTML = `
<option value="option10">Option 10</option>
<option value="option11">Option 11</option>
<option value="option12">Option 12</option>
`;
}
}
示例代码:
// HTML
<select id="dropdown1" onchange="changeDropdown2()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="dropdown2">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
// JavaScript
function changeDropdown2() {
var dropdown1 = document.getElementById("dropdown1");
var dropdown2 = document.getElementById("dropdown2");
// 发送Ajax请求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 根据返回的内容更新下拉列表框
dropdown2.innerHTML = xhr.responseText;
}
};
// 根据选中的值构造请求URL
var selectedValue = dropdown1.value;
var url = "getDropdown2Options.php?selectedValue=" + selectedValue;
// 发送GET请求
xhr.open("GET", url, true);
xhr.send();
}
以上是两种常见的方式来实现在下拉列表1中选中值时更改下拉列表框的内容。具体选择哪种方式取决于实际需求和开发环境。
领取专属 10元无门槛券
手把手带您无忧上云