基于另一个选择的可重用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选择/选项过滤器

回答

相关问题