多选择下拉列表 - 使用 jQuery 从一个'chaining'到下一个直到'complete'的操作/验证

Question

为这个标题道歉，因为我想不出更好的方式来描述它。在一个页面上，我有多个选择下拉列表。一个的选择可能会影响第二个，第二个的选择会影响第三个，以此类推…最后一个动作是在"结束"时使用所有三个值的选定值完成的。我想出了以下方法，这些方法似乎确实有效，但我必须相信有更好的方法来处理这个问题。

伪代码，但你应该明白。我会以各种方式使用它，例如显示数据表或显示基于"complete(("中每个select值的图表。

html

<select id="one" name="one">
some options here
</select>
<select id="two" name="two">
some options here
</select>
<select id="three" name="three">
some options here
</select>

jquery

$('#one').on("change", function (e) {
two();
});
$('#two').on("change", function (e) {
three();
});
$('#three').on("change", function (e) {
complete();
});
function one() {
...maybe change options of two or something else
$('#two').trigger('change');
}
function two() {
...maybe change options of three or something else
$('#two').trigger('change');
}
function three() {
...do something
$('#three').trigger('change');
}
function complete() {
...use values from all three to do something
}

为清晰起见，添加了更多信息：

无论什么选择被更改，我都需要对它和之后的每一个进行"检查"，直到完成操作。例如，如果我更改了1，那么我会检查它，然后是2，然后是3，然后运行complete。如果2被更改，我检查它，然后3，然后运行完成。如果3被更改，我会检查它，然后运行完成。

示例：1由用户更改为选项值"dogs"，因为在其中选择了dogs，我知道要将2中的选项更改为dogs类型，并且由于dogs类型显示在2中，我将3中的选项改为颜色。。。然后我跑完了。在这种情况下，Complete会给我所有类型、所有颜色的狗作为值。

现在，假设他们将2改为"比特币"，因为这是他们现在可以选择的选项。所以我检查了它的值，并将3更改为只显示all、white和black选项，然后运行complete。Complete给了我狗、比特犬和所有颜色作为价值观。

我的意思是，当任何选择被更改时，我可能会在更改后根据该更改对选择进行更改——就像它们都被链接在一起一样——我需要完成每一个选择。

我会用它来显示基于所选内容的表格和/或图表。因此，每次更改时，我都会检查之后的所有选择，获取值，并更新表/图表。

Answer 1

有很多方法。

<script>
function complete() {
jQuery( "select" ).each(function( index ) {
var _this = jQuery(this);
console.log("SELECT_BOX " + _this.attr('name') + ':' +_this.val());
});
}
jQuery('select').on('change', function(){
var _this = $(this);
if(_this.next('select').length){
//Here We are adding active class to the next select box, you can change as per requirement
_this.next('select').addClass('active');
}
else{
//When you reach to the last select box
complete();
}
})
</script>