jQuery for beter understanding：

$('#departureCitys').change( function() {
    $('.products_dispo').each(function () {
            $(this).show();
            if($(this).find('.cityName').text() != $('#departureCitys').find(":selected").text()){
                 $(this).toggle();
                 }
    });
});

$('#departureDates').change( function() {
    $('.products_dispo').each(function () {
            $(this).show();
            if($(this).find('.departureDate').text() != $('#departureDates').find(":selected").text()){
                 $(this).toggle();
                 }
    });
});

我要改变自己的做法吗？我看到的唯一解决方案是进行切换，但它会非常长（因为我有两个以上的选择）。

我做了一个小提琴，但他工作不正常，我不明白为什么。无论如何，如果这可以帮助你理解......这是它 - ＆gt; JsFiddle

如果有人对我有任何指示，我会很高兴看到它！

Answer 1

我会稍微改变你的代码并使用以下内容。基本上我所做的就是为每个选择选项设置数据属性，然后将连接数据属性（将内容与所选选项匹配）设置为表行中的新数据属性桌子。

例如：

0指向A，1指向B，2指向C，...表示目的地城市
0分至01/01/2015,1分至2015年1月2日，2分至03/01/2015，...目的地日期
0分为1分，1分为2分，2分为3分，......为目的地持续时间

当（让我们说）选择以下内容时：A，01/01 / 2015,5，值为0,0,4。然后我们获取这些值并将它们连接成一个新数据我们将与表中的值进行比较的值：'0,0,4'与每个表格行的数据属性进行比较。

这在哪里变得棘手＆＃39;是多个值可能的地方，因为没有为该选择选择任何值。让我们说他们将目的地日期留空，并将目的地城市设置为A，目的地持续时间设置为5.

下面的代码是使用正则表达式将字符串与输出正则表达式进行比较（根据用户选择的值创建，如果没有选择，我们默认为[0-9]+，表示+（其中一个更多）以下数字[0-9]（从0到9）

如果未选择目标日期，则输出正则表达式将为/0,[0-9]+,4/

现在您需要做的就是使用存储在SQL数据库中的主键（因为我假设您用来填充字段）并将其用作data-id值。

<小时/> HTML

<table id='trips'>
    <thead>
        <th>
            <select class='departureCity'>
                <option></option>
                <option data-id='0'>A</option>
                <option data-id='1'>B</option>
                <option data-id='2'>C</option>
                <option data-id='3'>D</option>
                <option data-id='4'>E</option>
            </select>
        </th>
        <th>
            <select class='departureDate'>
                <option></option>
                <option data-id='0'>01/01/2015</option>
                <option data-id='1'>02/01/2015</option>
                <option data-id='2'>03/01/2015</option>
                <option data-id='3'>04/01/2015</option>
                <option data-id='4'>05/01/2015</option>
            </select>
        </th>
        <th>
            <select class='departureDuration'>
                <option></option>
                <option data-id='0'>1</option>
                <option data-id='1'>2</option>
                <option data-id='2'>3</option>
                <option data-id='3'>4</option>
                <option data-id='4'>5</option>
            </select>
        </th>
    </thead>
    <tbody>
        <tr data-all='0,0,0'>
            <td class='city'>A</td>
            <td class='date'>01/01/2015</td>
            <td class='duration'>1</td>
        </tr>
        <tr data-all='1,0,0'>
            <td class='city'>B</td>
            <td class='date'>01/01/2015</td>
            <td class='duration'>1</td>
        </tr>
        <tr data-all='0,1,0'>
            <td class='city'>A</td>
            <td class='date'>02/01/2015</td>
            <td class='duration'>1</td>
        </tr>
        <tr data-all='0,0,4'>
            <td class='city'>A</td>
            <td class='date'>01/01/2015</td>
            <td class='duration'>5</td>
        </tr>
    </tbody>
</table>

的jQuery

var $city = $('.departureCity');
var $date = $('.departureDate');
var $dur = $('.departureDuration');

$('#trips select').on('change', function() {
    var array = [];
    array.city = $city.find('option:selected').data('id');
    array.date = $date.find('option:selected').data('id');
    array.dur = $dur.find('option:selected').data('id');
    console.log(array);
    if(typeof array.city === 'undefined') array.city = '[0-9]+';
    if(typeof array.date === 'undefined') array.date = '[0-9]+';
    if(typeof array.dur === 'undefined') array.dur = '[0-9]+';
    var regex = array.city+','+array.date+','+array.dur;
    $('#trips tbody tr').show();
    $('#trips tbody tr').each(function() {
        var $this = $(this);
        var data = $this.data('all');
        if(data.match(regex)) $this.show();
        else $this.hide();
    });

});

jsfiddle：http://jsfiddle.net/ctwheels/nfLog6x8/

功能在选择器上工作而不删除以前的值

jQuery for beter understanding：

1 个答案: