当第二个下拉列表取决于第一个下拉列表选择时,可以通过以下步骤来创建表单:
<form>
标签包裹表单内容。<select>
标签,并为其设置一个唯一的id
属性,以便后续操作。<option>
标签,并为每个选项设置一个唯一的value
属性,以便后续操作。document.getElementById()
方法获取第一个下拉列表的选中值。if
或switch
)来确定第二个下拉列表的选项。createElement()
方法创建<select>
元素,并为其设置一个唯一的id
属性。appendChild()
方法将第二个下拉列表添加到表单中。innerHTML
属性将第二个下拉列表的选项添加到<select>
元素中。value
属性。<input>
标签,并设置type
属性为submit
。addEventListener()
方法将表单的提交事件与一个函数绑定,以便在提交时执行相应的操作。以下是一个示例代码:
<form>
<select id="firstDropdown" onchange="updateSecondDropdown()">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div id="secondDropdownContainer"></div>
<input type="submit" value="Submit">
</form>
<script>
function updateSecondDropdown() {
var firstDropdown = document.getElementById("firstDropdown");
var selectedValue = firstDropdown.value;
var secondDropdownContainer = document.getElementById("secondDropdownContainer");
// 清空第二个下拉列表
secondDropdownContainer.innerHTML = "";
// 根据第一个下拉列表的选中值创建第二个下拉列表
var secondDropdown = document.createElement("select");
secondDropdown.id = "secondDropdown";
// 根据第一个下拉列表的选中值确定第二个下拉列表的选项
if (selectedValue === "option1") {
var option1 = document.createElement("option");
option1.value = "option1-1";
option1.innerHTML = "Option 1-1";
secondDropdown.appendChild(option1);
var option2 = document.createElement("option");
option2.value = "option1-2";
option2.innerHTML = "Option 1-2";
secondDropdown.appendChild(option2);
} else if (selectedValue === "option2") {
var option3 = document.createElement("option");
option3.value = "option2-1";
option3.innerHTML = "Option 2-1";
secondDropdown.appendChild(option3);
var option4 = document.createElement("option");
option4.value = "option2-2";
option4.innerHTML = "Option 2-2";
secondDropdown.appendChild(option4);
} else if (selectedValue === "option3") {
var option5 = document.createElement("option");
option5.value = "option3-1";
option5.innerHTML = "Option 3-1";
secondDropdown.appendChild(option5);
var option6 = document.createElement("option");
option6.value = "option3-2";
option6.innerHTML = "Option 3-2";
secondDropdown.appendChild(option6);
}
// 将第二个下拉列表添加到容器中
secondDropdownContainer.appendChild(secondDropdown);
}
// 在提交时执行相应的操作
document.querySelector("form").addEventListener("submit", function(event) {
event.preventDefault();
// 处理表单提交的逻辑
});
</script>
请注意,上述示例代码仅为演示目的,实际情况中可能需要根据具体需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云