Question

我有一个带有选项（月份）的HTML select，我在div元素中使用该选择过滤数据文本。该过滤器是一个简单的JS正则表达式。

现场演示： https://jsfiddle.net/jimmyadaro/tykuehxa/

请注意 January selected中的option值。这是动态的（我从数据库中获取信息）。

问题：我需要select才能在加载文档（或正文）时应用该正则表达式。不仅仅是select更改。

<select name="" id="date_filter">
    <option value="0">All months</option>
    <option value="01/2017" selected>January 2017</option>
    <option value="02/2017">February 2017</option>
    <option value="03/2017">March 2017</option>
</select>

<div class="date">
    <p>19/01/2017 17:39</p>
</div>
<div class="date">
    <p>19/02/2017 17:36</p>
</div>
<div class="date">
    <p>18/01/2017 20:40</p>
</div>
<div class="date">
    <p>18/02/2017 13:31</p>
</div>
<div class="date">
    <p>18/03/2017 13:17</p>
</div>
<div class="date">
    <p>18/03/2017 13:15</p>
</div>

$("#date_filter").on('load change', function() {
    var month = $(this).find(":selected").val();

    console.log("month: "+month);

    var pattern = new RegExp(month, "i");

        $('body').find('.date').each(function() {
            if (($(this).children('p').text().search(pattern) <= 0)) {
                $(this).hide();
            }
            if (($(this).children('p').text().search(pattern) >= 0)) {
                $(this).show();
            }
            if (month === "0") {
                $(this).find('.date').show();
            }
        });
});

Answer 1

在定义事件后触发事件。使用.trigger()或.change()：

$("#date_filter").on('change', function() {
       //rest code here
}).change();

<强> Working Demo

Answer 2

你可以在一个函数中包装事件监听器，并在页面加载时调用它：

filter_input(INPUT_POST, "description", FILTER_SANITIZE_STRING);

在加载时获取选择值并应用正则表达式

2 个答案: