Jquery-基于组合框的过滤器列表框

我有两个列表，一个显示汽车公司，另一个显示所有汽车

这是Xbox的第一个组合，第一个选项就是全部

<select id="company">
     <option selected="true" >ALL</option>
    <option>GM</option>
    <option>Honda</option>
    <option>Ford</option>
</select>

这是我的第二个盒子

<select id="names" multiple="multiple" size="8">
    <option>Chevy [GM]</option>
    <option>Buick [GM]</option>
    <option>Civic [Honda]</option>
    <option>Accord [Honda]</option>
    <option>Focus [Ford]</option>
</select>

基于第一个combox选择，我应该只在第二个列表中显示该汽车公司的汽车。即使是第二份名单，括号中也有汽车公司的名称。。这是固定格式。再次从第一个列表中，如果用户选择ALL I，则应显示所有车辆

有谁能给我一个想法来实现这个或代码片段呢

谢谢你的帮助

问候

---

Kiran

您可以在第一次选择的更改中分别选择第二次选择的选项，搜索子字符串并设置禁用属性。但这个解决方案有一个缺陷：不是每个浏览器都支持选项AFAIK的禁用属性

更新

并且如果您想完全隐藏选项，您应该考虑在某个临时存储中从第二个SELECT中存储项目，然后重新填充，只从存储中选择符合您的条件的项。p> 更新2

编辑：仅适用于FF

试试这个：

$(function(){
 $("#company").change(function(){
    var val = $(this).val();
    $("#names option").hide().filter(function(){
        var regExp = new RegExp("\\[" + val + "\\]$");
        return (val == "ALL") || regExp.test($(this).text());
    }).show();
 });
});

例如：

---

这是您想要尝试使用文本文件的第一个选项，或者JSON作为替代选项。

据我所知，隐藏选择选项仅在Firefox上有效，因此为了实现跨浏览器兼容性，您需要使用更多技巧，请参阅和其他。这就是我的建议：

对于HTML，请隐藏您的选择以及当前提供的版本：

<select id="company">
    <option selected="true" >ALL</option>
    <option>GM</option>
    <option>Honda</option>
    <option>Ford</option>
</select>
<br />
<div id="namesDiv">
    <select id="names" multiple="multiple" size="8">
        <option>Chevy [GM]</option>
        <option>Buick [GM]</option>
        <option>Civic [Honda]</option>
        <option>Accord [Honda]</option>
        <option>Focus [Ford]</option>
    </select>
</div>
<select id="baseNames" multiple="multiple" size="8">
    <option>Chevy [GM]</option>
    <option>Buick [GM]</option>
    <option>Civic [Honda]</option>
    <option>Accord [Honda]</option>
    <option>Focus [Ford]</option>
</select>

您可以。

编辑：已测试并使用IE7和Firefox 3.6.x

HTML：注意ALL选项上的值=

jQuery：

---

另一个选项是为选项指定类名，如下所示：

  <select id="names" multiple="multiple" size="8">
    <option class="gm">Chevy [GM]</option>
    <option class="gm">Buick [GM]</option>
    <option class="honda">Civic [Honda]</option>
    <option class="honda">Accord [Honda]</option>
    <option class="ford">Focus [Ford]</option>
  </select>

 $(document).ready(function(){
   $("#names>option").hide();
   $("#company").change(function(){
     $("#names>option").hide();
     $("#names>." + $(this).val()).show();
     if($(this).val() == "ALL"){
          $("#names>option").show();
     }
   });
});

---

并非所有浏览器都允许您在下拉列表中隐藏单个项目，因此您需要保留一个主列表，然后根据主列表重新填充

var names = $('#names option').clone();

$('#company').change(function() {
    var val = $(this).val();  
    $('#names').empty();
    names.filter(function(idx, el) {
        return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0;
    }).appendTo('#names');
});

---

在

AFAIK进行演示时，firefox仅支持部分选项的隐藏。非常感谢您的快速响应，但不幸的是，这只适用于Firefox@Bujji：是的，刚刚意识到，检查@justkt的答案。选择选项时隐藏不是跨浏览器的。谢谢jnpcl。是的，正如justkt所说，这在IE或Chrome@Bujji：正在使用替代解决方案。选项的显示和隐藏不是跨浏览器的。@在这种情况下，justkt可以替换为addClass和removeClass。谢谢.show和.hide将CSS应用于元素。IE不支持元素的显示或可见性，因此即使将其更改为.addClass也会失败。既然你可以轻松地在加载时克隆下拉列表，为什么还要在HTML中放置两份下拉列表副本[根据我的回答；-]@Alnitak-我很乐意承认你的解决方案更优雅。我的只是工作。非常感谢@justkt的好话该网站上的代码太可怕了-将JSON中的数组存储为逗号分隔的文本，而不是JSON数组？！感谢@Alnitak提供了这个精彩的解决方案。我正在对大约12oo条记录进行测试，并让您知道结果。如果有必要，可以将make存储在单独的字段中，这样在每次刷新列表时，不会对每一行调用.text.indexOf，从而加快测试速度。我也刚刚将.html改为.text再次感谢。刚测试了1500辆车，一切都很顺利。

$('#company').change(function() {
    var make = $(this).val();
    $('#names').contents().each(function() {
        if (this.nodeType == 8 && this.nodeValue.length > 0 && this.nodeValue.indexOf(make) != -1) {
            $(this).before('<option>' + this.nodeValue + '</option>');
            $(this).remove();
        }
        else if ($(this).val().indexOf(make) == -1 && $(this).val().length > 0) {
            $(this).replaceWith('<!--' + $(this).val() + '-->');
        }
    });
});

  <select id="names" multiple="multiple" size="8">
    <option class="gm">Chevy [GM]</option>
    <option class="gm">Buick [GM]</option>
    <option class="honda">Civic [Honda]</option>
    <option class="honda">Accord [Honda]</option>
    <option class="ford">Focus [Ford]</option>
  </select>

 $(document).ready(function(){
   $("#names>option").hide();
   $("#company").change(function(){
     $("#names>option").hide();
     $("#names>." + $(this).val()).show();
     if($(this).val() == "ALL"){
          $("#names>option").show();
     }
   });
});

var names = $('#names option').clone();

$('#company').change(function() {
    var val = $(this).val();  
    $('#names').empty();
    names.filter(function(idx, el) {
        return val === 'ALL' || $(el).text().indexOf('[' + val + ']') >= 0;
    }).appendTo('#names');
});