尝试根据选择的另一个组合框填充两个组合框
根据选择的另一个组合框填充两个组合框是一个常见的前端开发需求，可以通过以下步骤来实现：
- 监听第一个组合框的选择事件，当选择发生变化时触发相应的处理函数。
- 在处理函数中，根据第一个组合框的选择值，确定需要填充的数据。
- 根据确定的数据，动态生成选项并填充到第二个组合框中。
- 同样的方式，可以根据第二个组合框的选择值，确定需要填充的数据，并填充到第三个组合框中。
下面是一个示例代码，演示了如何实现上述功能：
<!DOCTYPE html>
<html>
<head>
<title>动态填充组合框</title>
</head>
<body>
<label for="firstSelect">第一个组合框：</label>
<select id="firstSelect">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
</select>
<label for="secondSelect">第二个组合框：</label>
<select id="secondSelect"></select>
<label for="thirdSelect">第三个组合框：</label>
<select id="thirdSelect"></select>
<script>
// 获取组合框元素
const firstSelect = document.getElementById('firstSelect');
const secondSelect = document.getElementById('secondSelect');
const thirdSelect = document.getElementById('thirdSelect');
// 定义数据
const data = {
option1: {
secondOptions: ['选项1-1', '选项1-2', '选项1-3'],
thirdOptions: ['选项1-1-1', '选项1-1-2', '选项1-1-3']
},
option2: {
secondOptions: ['选项2-1', '选项2-2', '选项2-3'],
thirdOptions: ['选项2-1-1', '选项2-1-2', '选项2-1-3']
},
option3: {
secondOptions: ['选项3-1', '选项3-2', '选项3-3'],
thirdOptions: ['选项3-1-1', '选项3-1-2', '选项3-1-3']
}
};
// 监听第一个组合框的选择事件
firstSelect.addEventListener('change', function() {
const selectedValue = firstSelect.value;
const secondOptions = data[selectedValue].secondOptions;
// 清空第二个和第三个组合框的选项
secondSelect.innerHTML = '';
thirdSelect.innerHTML = '';
// 填充第二个组合框的选项
for (let option of secondOptions) {
const optionElement = document.createElement('option');
optionElement.value = option;
optionElement.textContent = option;
secondSelect.appendChild(optionElement);
}
});
// 监听第二个组合框的选择事件
secondSelect.addEventListener('change', function() {
const selectedValue = secondSelect.value;
const thirdOptions = data[firstSelect.value].thirdOptions;
// 清空第三个组合框的选项
thirdSelect.innerHTML = '';
// 填充第三个组合框的选项
for (let option of thirdOptions) {
const optionElement = document.createElement('option');
optionElement.value = option;
optionElement.textContent = option;
thirdSelect.appendChild(optionElement);
}
});
</script>
</body>
</html>在上述示例代码中，我们通过监听第一个组合框的选择事件，根据选择的值动态生成并填充第二个组合框的选项。同时，我们也监听了第二个组合框的选择事件，根据选择的值动态生成并填充第三个组合框的选项。
这样，当用户选择第一个组合框的选项时，第二个组合框会根据选择的值动态更新选项；当用户选择第二个组合框的选项时，第三个组合框会根据选择的值动态更新选项。
请注意，上述示例代码中的数据是硬编码在脚本中的，实际开发中可能需要从后端获取数据并动态填充。此外，根据具体需求，还可以对代码进行优化和扩展，例如使用异步请求获取数据、添加默认选项等。
相关·内容
我目前有一个有两个组合框的表单。一个有名字，另一个有小时类型(即正常的“rg”和加班的“ot”)。我希望，根据名称选择和工时类型选择，它将自动填充一定的人工费率，因为这将推迟取决于名称和他们是否加班或定期工作。我知道如何使用一个组合框自动填充文本框，但不确定如何使用两个组合框
浏览 0提问于2018-01-10得票数 0
在组合框中选择的项发生更改时，如何更改组合框中的属性。实际上，我想要的是，当在一个组合框中选择的值被更改时，根据所选的值，将填充其他combox。我已经实现了INotifyProperty接口，即使在选择不同的值时，set属性块也不会被执行。让我用另一个例子再详细阐述一下:-
浏览 1提问于2011-05-15得票数 1
1回答
我正在删除windowsforms中datagridview中的组合框，假设我在一个datagridview中有两个组合框，所以我的问题是
如何根据从此datagridview中的另一个comboboxcolum中选择的值填充datagridview中的comboboxcolumn
浏览 1提问于2010-10-16得票数 0
1回答
我有点被这个任务的方法困住了。我希望能够为一个组合框提供基于单选按钮选择的两个单独列表。
如果不向我展示代码，什么方法会被视为标准
浏览 4提问于2014-07-31得票数 0
回答已采纳
在Zend Framework中，有没有一种方法可以根据上一个组合框中选择的值来填充组合框，但是在同一个页面上？
在我的例子中，我有一个用于域的组合框和一个用于专门化的组合框。如果我在第一个组合框(域)中选择Informatics，我希望在第二个组合
浏览 0提问于2012-04-06得票数 0
回答已采纳
我在我的HTML表单中有4个组合框。前两个是区域和分区。另外两个是类型和子类型。我想用数据库值填充组合框。我已经填充了第一个组合框，即区域ID，但之后当我选择特定区域时，然后根据该值，我想填充SubArea组合框。我不能只用PHP做这件事。我是JavaScript和Ajax的新手。你能帮帮我吗
浏览 0提问于2013-03-06得票数 0
我有两个组合盒A和B。B中的值是根据A中的选定值填充的，当我单击组合框A并选择一个项目时，我的代码工作正常，相应的值将在组合框B中填充。我已经将其写在了change事件中。但是，当我使用tab键导航并选择组合框A中的项并按下键盘进行更改时，组合</e
浏览 2提问于2010-10-29得票数 0
回答已采纳
如何根据C# winform中在另一个组合框中选择的值启用组合框。
我有两个组合框，如下所示。需要根据在第一个组合框中选择的值启用第二个组合框。注意，combobox1的第一个值是defualt，需要禁用combobox 2，但是如果选择了
浏览 9提问于2022-08-09得票数 0
我想等到组合框的内容发生变化后再获取该框的内容。我认为隐式等待在这里不起作用，因为元素已经存在于页面上。
我并不是在这个组合框中搜索某个特定值。我有另一个组合框，它是由值填充的，根据从这个组合框中选择的内容，会影响我试图等待的那个组合框。由
浏览 1提问于2014-08-26得票数 2
0回答
我已经在微软，Stackoverflow，techinthenet.com和其他几个网站上搜索了这个问题，但我找不到真正的解决方案。我正在尝试获取两个组合框(cboCourse和cboVols)以基于cboTrainee_Name的选择进行填充。第一个组合框的代码是：我搜索过的任何地方都提供了帮助和示例来<e
浏览 2提问于2017-12-05得票数 0
回答已采纳
1回答
我的组合框出现问题，正在尝试获取框中显示的文本。我将ItemsSource绑定到一个SqlDataReader，并尝试根据在第一个组合框中选择的项填充另一个组合框。在第一个组合框的selection changed事件中，我根据在该框中<e
浏览 0提问于2010-09-29得票数 0
回答已采纳
1回答
我有一个access数据库和一个包含两个组合框的表单。一个组合框根据对第一个组合框的选择来筛选其选项。这可以很好地工作，但是我有一个命令按钮可以改变表单的记录源。我只知道如何填充基于一个表的组合框。因此，当表单更改记录源时，组合框中仍填充来自第一个记录源<e
浏览 0提问于2011-04-29得票数 2
回答已采纳
我有一个包含主键TagId的山羊主表和另一个也包含主键TagId的名为WeightTable的表
在名为Mortalitydataentryform的表单上，我使用组合框/下拉框来填充来自Goat MasterTable的字段。我需要从权重表中填充子表单，显示基于相同组合框/下拉框的所有字段，其中山羊ID相同
浏览 0提问于2018-10-13得票数 0
1回答
我有两个独立的WPF组合框，它们都绑定到同一个对象以填充它们的值。但是，当我更改一个组合框中的选择时，另一个组合框中的选择被更改为与第一个相同，反之亦然。这不是我想要的行为，我只想将组合框的内容绑定到单个源，而不镜像它们的选择</e
浏览 1提问于2011-11-10得票数 1
回答已采纳
如何根据您在另一个组合框中选择的值来填充组合框？第一个组合框值来自一个表。第二个组合框可以是列表，也可以是日期。现在正在做列表部分的工作。如果该值将给出一个列表，则未绑定的组合框是可见的并启用的。这是可行的--我只是无法获得要填充<
浏览 3提问于2022-08-30得票数 0
如何将文本框状态的值设置为查询的字段值。在选择组合框的值之后，文本框应根据从组合框中选择的product_code显示查询的字段值。组合框使用另一个表，但两个数据源中的product-code相同
浏览 6提问于2019-09-16得票数 0
我想过并且想要做的场景是，我有两个组合框..一个是乡村，一个是城市。在页面加载时，必须使用数据库中的相应值填充国家/地区组合框，此时应隐藏我的城市组合框。通过从已填充的国家/地区组合框中选择国家/地区，隐藏的组合框即城市
浏览 0提问于2010-12-25得票数 0
回答已采纳
我创建了两个表“类别”和“子类别”。因此，我需要做的是，我已经组织了两个组合框，其中一个将从类别表中检索值并填充数据。但是，当其中一个从类别组合框中选择并填充子类别表中的所有值时，我需要填充另一个组合框。寻找很好的答案。
提前谢谢你。
浏览 4提问于2015-04-13得票数 0
回答已采纳
1回答
我在不使用按钮的情况下清除组合框时遇到问题。 我正在尝试根据用户选择的项目填充下拉组合框。也就是说，如果用户单击东北，另一个组合框将提供选择纽约或马萨诸塞州的选项。当在已经发生事件的组合框中选择不同的选项时，我的问题就出现
浏览 13提问于2019-10-14得票数 0
回答已采纳
我正在尝试根据另一个组合框值填充多个组合框。例如，第一个组合框名为cmb_BoxValue，其中数字为1-20，其余组合框的名称为cmb_Box1 until cmb_Box20。一旦用户选择了所需的组合框数量，使用AfterUpdate sub将根据值允许可见性= True
浏览 25提问于2021-11-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
