要使第二个下拉值与第一个下拉值相同,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>下拉框示例</title>
</head>
<body>
<label for="firstDropdown">第一个下拉框:</label>
<select id="firstDropdown" onchange="updateSecondDropdown()">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<br><br>
<label for="secondDropdown">第二个下拉框:</label>
<select id="secondDropdown">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<script>
function updateSecondDropdown() {
var firstDropdown = document.getElementById("firstDropdown");
var secondDropdown = document.getElementById("secondDropdown");
// 获取第一个下拉框的选中值
var selectedValue = firstDropdown.value;
// 将选中值赋值给第二个下拉框
secondDropdown.value = selectedValue;
}
</script>
</body>
</html>
在上述示例中,当第一个下拉框的选中值发生变化时,会调用updateSecondDropdown()
函数。该函数获取第一个下拉框的选中值,并将其赋值给第二个下拉框,从而使两个下拉框的值保持一致。
请注意,这只是一个简单的示例,实际应用中可能需要根据具体需求进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云