基於另一個選擇的可重用jQuery選擇/選項過濾器

像標題所示，我試圖創建一個jQuery函數來根據另一個選擇/選項的值過濾選擇選項。基於另一個選擇的可重用jQuery選擇/選項過濾器

到目前爲止，我已經設法創建了一種非常適合單次使用的功能，但是當我嘗試多次使用它時會中斷。

這是我到目前爲止有：

HTML

<tr class='car-selection'> 
<td class='label'>Car 1: </td> 

<td>Manufacturer: 
    <select class="manufacturer"> 
     <option>Select Manufacturer</option> 
     <option class="audi" value="Audi">Audi</option> 
     <option class="bmw" value="BMW">BMW</option> 
     <option class="mercedes-benz" value="Mercedes-Benz">Mercedes-Benz</option> 
    </select> 
</td> 



<td>Model: 
    <select class="model"> 
     <option class="audi">Select Model</option> 
     <option value="a1" class="audi">A1</option> 
     <option value="a3" class="audi">A3</option> 
     <option value="a4" class="audi">A4</option> 
     <option value="a5" class="audi">A5</option> 
     <option value="a6" class="audi">A6</option> 

     <option class="bmw">Select Model</option> 
     <option value="1series" class="bmw">1 Series</option> 
     <option value="3series" class="bmw">3 Series</option> 
     <option value="5series" class="bmw">5 Series</option> 
     <option value="7series" class="bmw">7 Series</option> 
     <option value="x5" class="bmw">X5</option> 

     <option class="mercedes-benz">Select Model</option> 
     <option value="aclass" class="mercedes-benz">A-Class</option> 
     <option value="bclass" class="mercedes-benz">B-Class</option> 
     <option value="cclass" class="mercedes-benz">C-Class</option> 
     <option value="eclass" class="mercedes-benz">E-Class</option> 
     <option value="mclass" class="mercedes-benz">M-Class</option> 
    </select> 
</td>   
</tr> 


<tr class='car-selection'> 
<td class='label'>Car 2: </td> 

<td>Manufacturer: 
    <select class="manufacturer"> 
     <option>Select Manufacturer</option> 
     <option class="audi" value="Audi">Audi</option> 
     <option class="bmw" value="BMW">BMW</option> 
     <option class="mercedes-benz" value="Mercedes-Benz">Mercedes-Benz</option> 
    </select> 
</td> 



<td>Model: 
    <select class="model"> 
     <option class="audi">Select Model</option> 
     <option value="a1" class="audi">A1</option> 
     <option value="a3" class="audi">A3</option> 
     <option value="a4" class="audi">A4</option> 
     <option value="a5" class="audi">A5</option> 
     <option value="a6" class="audi">A6</option> 

     <option class="bmw">Select Model</option> 
     <option value="1series" class="bmw">1 Series</option> 
     <option value="3series" class="bmw">3 Series</option> 
     <option value="5series" class="bmw">5 Series</option> 
     <option value="7series" class="bmw">7 Series</option> 
     <option value="x5" class="bmw">X5</option> 

     <option class="mercedes-benz">Select Model</option> 
     <option value="aclass" class="mercedes-benz">A-Class</option> 
     <option value="bclass" class="mercedes-benz">B-Class</option> 
     <option value="cclass" class="mercedes-benz">C-Class</option> 
     <option value="eclass" class="mercedes-benz">E-Class</option> 
     <option value="mclass" class="mercedes-benz">M-Class</option> 
    </select> 
</td>   
</tr> 

</table>

jQuery的

$(document).ready(function() { 

    var allOptions = $('.model option');  
    $('.manufacturer').change(function() { 

     $('.model option').remove(); 
     var classN = $('.manufacturer option:selected').prop('class'); 
     var opts = allOptions.filter('.' + classN); 
     $.each(opts, function (i, j) { 
      $(j).appendTo('.model'); 
     }); 
    }); 

});

JSFiddle demo

我想感謝所有幫助我能得到這個！
謝謝。

來源

2014-06-09 Ross

使用這個jQuery：

$(document).ready(function() { $('.model option').hide(); $('.manufacturer').change(function() { var classN = $(this).find(' option:selected').prop('class'); $(this).parent().parent().find('.model option').hide(); $(this).parent().parent().find('.model option.'+classN).show(); }); });

演示：http://jsfiddle.net/SV4Q8/10/

來源

2014-06-09 10:36:26 Laurens

感謝輸入，但這種方法是不是跨瀏覽器兼容...我已經試過顯示/隱藏，但使用'顯示：在沒有按'option'元素」 none' t在大多數瀏覽器中工作 – Ross

試試這個：http://jsfiddle.net/lotusgodkk/SV4Q8/13/

我修改你的HTML中按以下方式。我使用optgroup而不是option。另外我使用自定義屬性和CSS來減少對jQuery的依賴。請檢查這是否是你需要的。

HTML：

<table> 
    <tr class='car-selection'> 
     <td class='label'>Car 1:</td> 
     <td>Manufacturer: 
      <select class="manufacturer"> 
       <option>Select Manufacturer</option> 
       <option class="audi" value="Audi">Audi</option> 
       <option class="bmw" value="BMW">BMW</option> 
       <option class="mercedes-benz" value="Mercedes-Benz">Mercedes-Benz</option> 
      </select> 
     </td> 
     <td>Model: 
      <select class="model"> 
       <optgroup class="audi" label="Select Model"> 
        <option value="a1" class="audi">A1</option> 
        <option value="a3" class="audi">A3</option> 
        <option value="a4" class="audi">A4</option> 
        <option value="a5" class="audi">A5</option> 
        <option value="a6" class="audi">A6</option> 
       </optgroup> 
       <optgroup class="bmw" label="Select Model"> 
        <option value="1series" class="bmw">1 Series</option> 
        <option value="3series" class="bmw">3 Series</option> 
        <option value="5series" class="bmw">5 Series</option> 
        <option value="7series" class="bmw">7 Series</option> 
        <option value="x5" class="bmw">X5</option> 
       </optgroup> 
       <optgroup class="mercedes-benz" label="Select Model"> 
        <option value="aclass" class="mercedes-benz">A-Class</option> 
        <option value="bclass" class="mercedes-benz">B-Class</option> 
        <option value="cclass" class="mercedes-benz">C-Class</option> 
        <option value="eclass" class="mercedes-benz">E-Class</option> 
        <option value="mclass" class="mercedes-benz">M-Class</option> 
       </optgroup> 
      </select> 
     </td> 
    </tr> 
    <tr class='car-selection'> 
     <td class='label'>Car 2:</td> 
     <td>Manufacturer: 
      <select class="manufacturer"> 
       <option>Select Manufacturer</option> 
       <option class="audi" value="Audi">Audi</option> 
       <option class="bmw" value="BMW">BMW</option> 
       <option class="mercedes-benz" value="Mercedes-Benz">Mercedes-Benz</option> 
      </select> 
     </td> 
     <td>Model: 
      <select class="model"> 
       <optgroup class="audi" label="Select Model"> 
        <option value="a1" class="audi">A1</option> 
        <option value="a3" class="audi">A3</option> 
        <option value="a4" class="audi">A4</option> 
        <option value="a5" class="audi">A5</option> 
        <option value="a6" class="audi">A6</option> 
       </optgroup> 
       <optgroup class="bmw" label="Select Model"> 
        <option value="1series" class="bmw">1 Series</option> 
        <option value="3series" class="bmw">3 Series</option> 
        <option value="5series" class="bmw">5 Series</option> 
        <option value="7series" class="bmw">7 Series</option> 
        <option value="x5" class="bmw">X5</option> 
       </optgroup> 
       <optgroup class="mercedes-benz" label="Select Model"> 
        <option value="aclass" class="mercedes-benz">A-Class</option> 
        <option value="bclass" class="mercedes-benz">B-Class</option> 
        <option value="cclass" class="mercedes-benz">C-Class</option> 
        <option value="eclass" class="mercedes-benz">E-Class</option> 
        <option value="mclass" class="mercedes-benz">M-Class</option> 
       </optgroup> 
      </select> 
     </td> 
    </tr> 
</table>

CSS：

td.label { 
    font-weight: bold; 
} 
.model * { 
    display:none; 
} 
select[data-class="audi"] .audi { 
    display:block; 
} 
select[data-class="bmw"] .bmw { 
    display:block; 
} 
select[data-class="mercedes-benz"] .mercedes-benz { 
    display:block; 
} 
select[data-class="audi"] .audi { 
    display:block; 
}

JS：

$(document).ready(function() { 
    $('.manufacturer').change(function() { 
     var s = $(this); 
     var val = s.val().toLowerCase(); 
     var nextSelect = s.parents('td:first').next('td:first').find('.model:first'); 
     nextSelect.attr('data-class', val); 
     nextSelect.find('option.' + val).attr('selected', 'selected'); 
    }); 
});

來源

2014-06-09 10:58:18

再次不是我需要的......我需要根據所選製造商過濾車型。謝謝 – Ross

假設你的HTML永遠不會改變，下面是最好的實現

$('.manufacturer').change(function() { 
    var modelObj = $(this).parent().next().children(".model"); 
    var selector = "option[class="+this.value.toLowerCase()+"]"; 
    modelObj.children(":not("+selector+")").hide(); 
    modelObj.children(selector).show(); 
});

請參閱我的LIVE DEMO

來源

2014-06-09 15:15:58

基於另一個選擇的可重用jQuery選擇/選項過濾器

回答

相關問題