1

複数の選択ボックスを使用して、クライアント側で長いリストをファイリングできる必要があります。

1つの選択ボックスを使用してこれを成功させることができました。

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

<select id="company2">
  <option selected="true" >ALL</option>
  <option>Buick [GM]</option>
  <option>Honda</option>
  <option>Ford</option>
</select>

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

そして、スクリプト

 var names = $('#names li').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');

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

これはほぼ機能します。最初の選択ボックスで GM を選択すると、リスト<li>が

  • シボレー [GM]
  • ビュイック [GM]

次に、2番目の選択ボックスを使用して選択Buick [GM]すると、<li>表示のみに変更されます

  • ビュイック [GM]

それが私が欲しいものです。ただし、2番目のボックスでHondaを選択すると表示されることがわかりました

  • シビック［ホンダ］
  • アコード【ホンダ】

私の質問は、GM とホンダの両方を一緒に使用できるように、2 つを連結するにはどうすればよいかということです。

フィルタなしのリストは次のとおりです。

  • シボレー [GM]
  • ビュイック [GM]
  • ビュイック [GM]
  • ビュイック [GM]
  • シビック［ホンダ］
  • アコード【ホンダ】
  • フォーカス[フォード]

最初のフィルターから GM を選択すると、それが表示されます

  • シボレー [GM]
  • ビュイック [GM]
  • ビュイック [GM]
  • ビュイック [GM]

したがって、2 番目のフィルターから「ビュイック [GM]」を選択すると、リストが表示されます。

  • ビュイック [GM]
  • ビュイック [GM]
  • ビュイック [GM]

これは正しいですが、2 番目のフィルターが Ford に設定されていると、リストが表示されます

  • フォーカス[フォード]

そのため、フィルターは一緒に機能していません</p>

4

2 に答える 2

0

select両方の要素のイベント ハンドラーを組み合わせる必要があります。

var $names = $('#names'),
    $namesAll = $names.find('li'),
    $company1 = $('#company'),
    $company2 = $('#company2');

$company1.add( $company2 ).change(function() {

    var val1 = $company1.val(),
        val2 = $company2.val();

    $names.empty();

    if ( val1 == 'ALL' && val2 == 'ALL' ) {
        $names.append( $namesAll );
    }
    else {
        $namesAll.filter(function(i, el) {
            var $el = $(el);
            return ~$el.text().indexOf( val1 ) || ~$el.text().indexOf( val2 );
        }).appendTo( $names );
    }
});​

これがフィドルです：http://jsfiddle.net/EfEYQ/

上記の解決策は機能しますが、DOM をあまりいじらないことをお勧めします。代わりに、 CSS にクラスを用意してから、表示したい shiddenでそのクラスを切り替えるだけです。li

var  $names = $('#names li'),
     $company1 = $('#company'),
     $company2 = $('#company2');

$company1.add( $company2 ).change(function() {

    var val1 = $company1.val(),
        val2 = $company2.val();

    if ( val1 == 'ALL' && val2 == 'ALL' ) {
        $names.removeClass('hidden');
    }
    else {
        $names.addClass('hidden').filter(function(i, el) {
            var $el = $(el);
            return ~$el.text().indexOf( val1 ) || ~$el.text().indexOf( val2 );
        }).removeClass('hidden');
    }
});​

これがフィドルです：http://jsfiddle.net/89qbV/

コメントでさらに明確にした後、これがあなたが探しているものかもしれないと思います：

var  $names = $('#names li'),
     $company1 = $('#company'),
     $company2 = $('#company2');

$company1.add( $company2 ).change(function() {

    var val1 = $company1.val(),
        val2 = $company2.val();

    if ( val1 == 'ALL' && val2 == 'ALL' ) {
        $names.removeClass('hidden');
    }
    else {
        $names.addClass('hidden').filter(function(i, el) {

            var $el = $(el),
                include = true;

            if ( val1 != 'ALL' && !~$el.text().indexOf( val1 ) ) include = false;
            if ( val2 != 'ALL' && !~$el.text().indexOf( val2 ) ) include = false;

            return include;

        }).removeClass('hidden');
    }
});​

これがフィドルです：http://jsfiddle.net/WfNav/

于 2012-08-24T14:35:42.630 に答える
0

以前のコードを使用してこれに取り組みましたが、「ALL」の動作について確信が持てなかったので、最初の選択要素のみが優先されます (最初がすべての場合、すべてが表示されます)。必要に応じて、filterNames() || に追加するだけです。val2 === 'すべて'

また、あなたのコードでは、最初の要素が変更されるまで、2 番目の選択要素の変更イベントがフックされないことに気付きました。それで、それがありました。

お役に立てれば！

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

$('#company').change(function() {
    var val = $(this).val();
    var val2 = $('#company2').val();
    filterNames(val, val2);
});

$('#company2').change(function() {
    var val = $('#company').val();
    var val2 = $(this).val();
    filterNames(val, val2);
});

function filterNames(val, val2) {
    $('#names').empty();
    names.filter(function(idx, el) {
        return val === 'ALL' || $(el).text().indexOf( val ) >= 0 || $(el).text().indexOf( val2 ) >= 0;
    }).appendTo('#names');
}
于 2012-08-24T14:53:57.710 に答える