Question

我们已经构建了一个包含搜索功能的网站，允许用户通过一系列下拉菜单深入查看结果列表，并且我们遇到了刷新问题。

该网站有4个下拉列表 - 所有这些都在页面加载时变灰（除了第一个） - 首先选择轮胎宽度 - 第二个然后根据第一个选择显示可用的轮廓选项 - 第三个显示基于第一个和第二选择和第四选择基于前3个选择的评级。

每个下拉列表都有一个相关的函数 - 通过onChange事件触发。

如 -

 $('.sel0').on('change', function() {
    alert('sel 0 selected');
    $(".sel1").removeAttr("disabled");
    //populate function for sel1

 });

我们遇到的问题是，如果用户将父下拉（即第一个配置文件选项）更改为不同的结果 - 第二个选项中的某些结果可能与之前的选择相同 - 所以如果例如，用户选择宽度为155，然后选择70的轮廓等等 - 然后改变了主意，并希望宽度为145宽度，70-70的轮廓将在之前的选择中被选中，因此与之相关的功能这种下拉不会触发“改变”而不是“点击”。

由于onclick事件不适用于下拉菜单，我们需要一个替代解决方案 - 但尚未发现一个！

我创建了一个js小提琴（http://jsfiddle.net/s60mLvsm/2/）来重新创建我的问题 - 选择所有选项然后尝试重新选择已经选择的选项 - 显然是因为onchange会不会触发..帮助！？

有关onclick或onselect样式解决方案的任何建议，请指教！

Answer 1

使用以下代码：

$('.sel0').on('change', function() {
    //alert('sel 0 selected');
    $('.sel1').removeAttr('disabled');
    $('.sel1 option').eq(0).prop('selected', 'selected');
    $('.sel2 option').eq(0).prop('selected', 'selected');
    $('.sel3 option').eq(0).prop('selected', 'selected');
    $('.sel2, .sel3').attr('disabled', 'disabled'); 
});

$('.sel1').on('change', function() {
    //alert('sel 1 selected'); 
    $('.sel2').removeAttr('disabled');
    $('.sel2 option').eq(0).prop('selected', 'selected');
    $('.sel3 option').eq(0).prop('selected', 'selected');
    $('.sel3').attr('disabled', 'disabled');
});

$('.sel2').on('change', function() {
    // alert('sel 2 selected'); 
    $('.sel3').removeAttr('disabled');
    $('.sel3 option').eq(0).prop('selected', 'selected');
});

如果可以的话，尽量缩短它。

Grouped Select2下拉（选择）刷新问题

1 个答案: