optgroup上的jQuery篩選器

我有兩個選擇框。第一個是第二個選擇組的列表。兩者都是我的查詢所需要的，但是我想過濾第二個選擇來僅顯示區域optgroup，並且當它從第一個選擇時就是校園。optgroup上的jQuery篩選器

這裏是我的代碼：

<html> 
<body> 
<select name="region"> 
    <option value="%">All</option> 
    <option value="A">Northwest</option> 
    <option value="B">North Central</option> 
</select> 
<select name="campus"> 
    <option value="%">All</option> 
    <optgroup label="Northwest"> 
     <option value="1">Gary</option> 
     <option value="2">Valparaiso</option> 
     <option value="3">East Chicago</option> 
    </optgroup> 
    <optgroup label="North Central"> 
     <option value="4">South Bend</option> 
     <option value="5">Elkhart</option> 
     <option value="6">Warsaw</option> 
    </optgroup> 
</select> 
</body> 
</html>

因此，如果有人從第一個選擇西北，我想使用jQuery下滲第二個，因此現在看起來像這樣：

<select name="campus"> 
    <optgroup label="Northwest"> 
     <option value="1">Gary</option> 
     <option value="2">Valparaiso</option> 
     <option value="3">East Chicago</option> 
    </optgroup> 
</select>

甚至不知道這是否可能，這是我第一次嘗試jQuery，所以我迷路了。提前致謝。

來源

2012-07-25 exodar

嘗試.hide()其他<optgroup> s和.show()你想要的那個。

事情是這樣的：

$('select[name="region"]').change(function() { 
    var $sel = $('select[name="campus"]'), 
     val = $(this).val(), 
     campus = $('option:selected', this).text(); 
    if (val === '%') { 
     $('option,optgroup', $sel).show(); 
    } 
    else { 
     $('optgroup, optgroup > option', $sel).hide(); 
     $('optgroup[label="' + campus + '"]', $sel).children().andSelf().show(); 
    } 
});

你不能只是隱藏<optgroup>，你需要隱藏其子<option>太遲了。

DEMO：http://jsfiddle.net/rffwW/

編輯：似乎沒有在IE（顯然Safari瀏覽器）工作。 Another answer建議在<span>小號包裹<option> S，讓我們試試：

$('select[name="region"]').change(function() { 
    var $sel = $('select[name="campus"]'), 
     val = $(this).val(), 
     campus = $('option:selected', this).text(); 
    $('span > optgroup', $sel).unwrap(); 
    if (val !== '%') { 
     $('optgroup:not([label="' + campus + '"])', $sel).wrap('<span/>'); 
    } 
});

DEMO：http://jsfiddle.net/rffwW/1/

來源

2012-07-25 15:24:28

不桌面Safari瀏覽器或iOS的Safari工作。需要它在兩者中工作。 – exodar 2012-07-25 15:36:10

@exodar：它適用於Chrome。對不起，我沒有Safari進行測試。你是什麼意思「不起作用」？它有什麼作用？ – 2012-07-25 15:37:25

它什麼都不做。您從第一個框中選擇，第二個框保留完整列表。 – exodar 2012-07-25 15:38:45

我碰到一個類似的解決方案這裏走來：https://gist.github.com/robcowie/2267793

這裏是插件適應與選擇工作文字而不是數值：

$.fn.filterGroups = function(options) { 
    var settings = $.extend({filterByText: true}, options); 

    return this.each(function(){ 
     var $select = $(this); 
     $select.data('fg-original-groups', $select.find('optgroup').clone()).children('optgroup').remove(); 

     $(settings.groupSelector).change(function(){ 
      var $this = $(this); 

      var optgroup_label = $.trim($this.val().toUpperCase()); 
      if(settings.filterByText) 
       optgroup_label = $.trim($('option:selected', $this).text()); 

      var $optgroup = $select.data('fg-original-groups').filter("optgroup[label='" + optgroup_label + "']").clone(); 
      $select.children('optgroup').remove(); 
      $select.append($optgroup); 
     }).change(); 

    }); 
};

要使用該插件添加您的選擇就像（我寧願使用的ID）：

$('select[name="campus"]').filterGroups({groupSelector: 'select[name="region"]' });

來源

2014-03-13 15:07:15 Courtenay

我需要從上述函數中刪除「toUpperCase」以使其工作。 – Gerfried 2015-03-23 21:38:59

optgroup上的jQuery篩選器

回答

相關問題