Jquery - окно списка фильтров на основе выпадающего списка - PullRequest
Новая
       15

Jquery - окно списка фильтров на основе выпадающего списка

4 голосов
/ 21 апреля 2011

У меня есть два списка, один отображает автомобили компании, а второй отображает все автомобили

Вот первый comboxbox (первый вариант - ВСЕ) 

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

На основании первого выбора в поле со списком я должен отображать только автомобили этой компании во втором списке. Даже во втором списке в скобках указано название автомобильной компании. Это фиксированный формат. Снова из первого списка, если пользователь выбирает «ВСЕ», я должен показать все транспортные средства.

Может ли кто-нибудь дать мне идею реализовать это или фрагмент кода для этого?

Спасибо за вашу помощь

Привет

Киран

Ответы [ 7 ]

6 голосов
/ 21 апреля 2011

Не все браузеры позволяют скрывать отдельные элементы в раскрывающемся списке, поэтому необходимо сохранить основной список, а затем заполнить его на основе этого. 

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/

2 голосов
/ 21 апреля 2011

Насколько я знаю, скрытие опций выбора работает только в 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>

Скрыть basenames с помощью CSS 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();
                }
            });
        }
    });
});

Вы можете увидеть это в действии .

1 голос
/ 21 апреля 2011

РЕДАКТИРОВАТЬ: работает только в 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/

0 голосов
/ 21 апреля 2011

Другим вариантом является присвоение имени класса таким параметрам: 

  <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();
     }
   });
});
0 голосов
/ 21 апреля 2011

Редактировать: Протестировано и работать с 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() + '-->');
        }
    });
});
0 голосов
/ 21 апреля 2011

http://css -tricks.com / динамические-выпадающие /

Это то, что вы хотели попробовать сделать с первым вариантом, используя текстовые файлы, или альтернативным вариантом является JSON.

0 голосов
/ 21 апреля 2011

Вы можете каждый () в опциях второго выбора в change () первого выбора, искать подстроку и устанавливать отключенный атрибут.(Но у этого решения есть недостаток: не каждый браузер поддерживает отключенный атрибут для параметра AFAIK.)

ОБНОВЛЕНИЕ

И если вы хотите полностью скрыть параметры, вам следуетрассмотрите возможность хранения предметов из вашего второго выбора в некотором временном хранилище и повторно заполняйте те, которые выбирают из хранилища, только элементами, соответствующими вашим критериям.

ОБНОВЛЕНИЕ2 

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

        });
    });
...