Question

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

这是第一个comboxbox（第一个选项是ALL）

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

这是我的第二个lisbox

<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选择，我应该只显示第二个列表中的汽车公司汽车。即使是第二个列表也有括号内的汽车公司名称。这是固定格式。再次从第一个列表中，如果用户选择“全部”，我应该显示所有车辆。

任何机构都可以给我一个实现此代码段或代码片段的想法吗？

感谢您的帮助

此致

Kiran

Answer 1

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

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');
});

http://jsfiddle.net/alnitak/WsHvS/

的工作演示

Answer 2

据我所知，隐藏选择选项仅适用于Firefox，因此对于跨浏览器兼容性，您需要使用更多技巧（请参阅this SO question和this question等）。这就是我的建议：

对于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>

使用CSS basenames隐藏display:none。

然后，对于您的jQuery，您将定期使用克隆版names替换baseNames并过滤它。

$(document).ready(function() {
    $("#company").change(function() {
        $("#namesDiv").empty();
        $("#baseNames").clone().appendTo("#namesDiv").attr("id", "names");
        var val = $(this).find("option:selected").val();
        if(val !== "ALL") {
            $("#names option").each(function() {
                if($(this).val().indexOf(val) < 0) {
                    $(this).remove();
                }
            });
        }
    });
});

你可以see this in action。

Answer 3

编辑：仅在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();
 });
});

示例：http://jsfiddle.net/Chandu/2Zppp/

Answer 4

你可以在第一个选择的change（）中的第二个选择选项上的每个（），搜索子串并设置disabled属性。（但是这个解决方案有一个缺陷：不是每个浏览器都支持选项的禁用属性，AFAIK。）

<强>更新

如果要完全隐藏选项，则应考虑将第二个选项中的项目存储在某个临时存储中，并仅使用符合条件的项目重新填充从存储中选择的项目。

<强> UPDATE2

    var temp = new Array();

    $(document).ready(function(){

    //save in temp
    $('select#names').children().each(function(){temp.push($(this).val());});

    //change handler
    $('select#company').change(function(){
        var pref = $(this).val();
        $('select#names').children().remove();

        for(i=0;i<temp.length;i++)
        {

            if(pref=='ALL' || temp[i].match('.[\\[]'+pref+'[\\]]$') )
                $('select#names').append('<option>'+temp[i]+'</option>');
        }

        });
    });

Answer 5

http://css-tricks.com/dynamic-dropdowns/

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

Answer 6

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

<强> Live Demo

HTML： 注意value=""选项

上的ALL

<select id="company">
    <option selected="true" value="">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>

<强> jQuery的：

$('#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() + '-->');
        }
    });
});

Answer 7

另一种选择是为这些选项分配一个类名：

  <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>

然后根据类你可以像这样显示（）和hide（）：

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

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

7 个答案: