-1

検索でフィルターとして機能するために使用できるいくつかの基準オプションをユーザーに提供する選択メニューがあります。ユーザーは必要な数のフィルターを追加できますが、現時点では、ユーザーは同じフィルターを複数回追加できます.

私がやりたいことは、ユーザーが選択ボックスからフィルターを選択すると、値が配列に追加され、選択ボックスのそのオプションが無効になることです.これはjavascriptとjqueryで可能ですか?

現在、私は以下を持っています

新しいフィルター選択メニューを作成するコード

$('select.option').live({
  change: function() {
    if($(this).val() == 'distance')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/distance',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'height')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/height',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'appearance')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/appearance',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'education')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/education',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'children')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/children',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'smoking')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/smoking',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'drinking')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/drinking',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'politics')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/politics',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'religion')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/religion',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'ethnicity')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/ethnicity',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
    else if($(this).val() == 'work')
    {
        var element = $(this);
        $.ajax({
            url: site_url + 'ajax/row/work',
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
  }
});
4

2 に答える 2

0

HTML がどのように見えるかはわかりませんが、大まかに次のようにします。

<select class="option">
    <option value="distance" data-path="ajax/row/distance">Distance</option>
    <option value="height" data-path="ajax/row/height">Height</option>
    ...
</select>

次に、jQuery を次のようにします (1 つのページに複数の選択があり、フィルターは行ごとに 1 回しか適用できないと仮定します)。

$('select.option').live({
    change: function() {
        // get selected history or empty array
        var selected = $(this).data('selected') || [];

        // get selected option
        var $element = $(this).find('option:selected');

        // if selected option in history, return
        if($.inArray($element.val(), selected) return;

        // otherwise, add to history and save back into element
        selected.push($element.val());
        $(this).data('selected', selected);

        // query AJAX by using the data- attribute of the option
        $.ajax({
            url: site_url + $element.data('path'),
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
    }
});
于 2012-06-28T21:34:58.120 に答える
0

の名前urlと選択したオプションは同じなので、これを試すことができます：

$('select.option').on({
  change: function() {
        var element = $(this).val();
        $(this).prop('disabled', true);
        $.ajax({
            url: site_url + 'ajax/row/' + element,
            success: function(data) {
                element.parent().next('td.fillin').html(data);
            }
        });
})
于 2012-06-28T21:33:53.897 に答える