带有更改跳转菜单的链式选择 jQuery答案

【问题标题】：Chained Selects jQuery with change jump menu带有更改跳转菜单的链式选择 jQuery
【发布时间】：2013-01-10 03:20:02
【问题描述】：

我正在使用 Chained Selects jQuery 插件，http://www.appelsiini.net/projects/chained

但我想在第二个选择元素中添加一个跳转菜单，即需要点击提交。如果我使用处理程序更改，则会在链式脚本上触发。

  $(function(){
      $("#spotCat").chained("#locationCat"); 
      $("#spotCat").change(function(){
        window.location.href = $(this).val();
      });
  });

我不确定解决问题的最佳方法？当您“单击”选择下拉箭头时触发单击事件？

【问题讨论】：

我想了一个讨厌的方法来做这件事，但感觉不太好。 $(function(){ $("#spotCat").chained("#locationCat"); $("#spotCat").change(function(){ this.blur() }); $("#spotCat" ).blur(function(){ window.location.href = $(this).val(); }); });谁有更好的主意？
我不明白你想要完成什么，你能解释一下吗..

标签： jquery jquery-plugins chained

【解决方案1】：

根据插件的功能方式（具体来说，当它填充依赖选项列表时它总是保留第一个项目被选中的方式），您只需将一个 if 添加到匿名 change 事件处理函数：


if ($(this).find("option:selected").index() !== 0) {

演示（打开浏览器的开发人员工具并转到控制台以查看事件逻辑何时触发 - 或者更重要的是，当它不触发时）： http://jsfiddle.net/ywn6G/

上下文中的if：


$(function(){
    $("#spotCat").chained("#locationCat"); 
    $("#spotCat").change(function(){
        if ($(this).find("option:selected").index() !== 0) {
            window.location.href = $(this).val();
        }
    });
 });

【讨论】：

这种方式很好，但是第一个选项总是在最后一个选项中被选中，所以你不能点击那个选项来触发 URL。我确实想出了另一个可行的解决方案，但不是很漂亮，见下文。
当依赖列表的第一项已经被选中时，用户如何触发它？通过下拉选项然后单击已选择的选项？如果是这样，这似乎不直观，我可能会建议将“--”、“选择一个”等作为第一个项目，就像在 Chained Select 插件主页上的演示中一样。

【解决方案2】：

以下方式似乎对我有用，因为模糊事件不会被触发，除非它是焦点。更改事件没有给出。

$(function(){
      $("#spotCat").chained("#locationCat"); 
  $("#spotCat").change(function(){      
        this.blur()
  });
  $("#spotCat").blur(function(){
        if($(this).val().length !== 0) {
          window.location.href = $(this).val();
        }
  });

});

【讨论】：