Question

昨天，我正在研究这个问题：Add class to elements based on matching field from select value

今天，我遇到了另外一个问题。

目前，我有一些选择：

<select id="selectList" name="field_53c53945dcb87">
<option value="1500">0 – 1,500 sq ft</option>
<option value="3000">1,500 – 3,000 sq ft</option>
<option value="5000">3,000 – 5,000 sq ft</option>
<option value="10000">5,000 – 10,000 sq ft</option>
<option value="20000">10,000 – 20,000 sq ft</option></select>

我还有一个类似的属性列表：

<div class="property">
<h2>Name of Property</h2>
<a href="#" class="button">More Details</a>
</div>

我的jQuery将一个active_select类添加到一个属性中，该属性具有select的值，而一个类的dormant_select添加到没有的属性。

问题在于我想要一个全部的＆＃39;从所有属性中删除active_和dormant_select类的选项。这是默认选项 - 默认状态与active_select略有不同，这就是为什么我不能将active_select设为默认值。这是我尝试过的，但它并没有完全奏效，因为它对待所有＆＃39; All＆＃39;好像它应该有dormant_select：

(function($){
    $(document).ready(function(){
        // Add an all function to default when page loads
        $("#selectList").prepend("<option value='all' selected class='selectAll'>ALL</option>");
        // If is 'All', remove all dormant/active select classes
        $("#selectList").change(function(){
            $( "select option:selected").each(function(){
                if($(this).hasClass('selectAll')){
                    $('.property').removeClass('active_select dormant_select');
                }
                else {

                }
            });
        }).change();    
        // Create a variable with current selected item
        $('#selectList').on('change', function() {
            // Set selected option into variable
            var selected = $(this).find('option:selected').text(); 
            // Remove active_select 
            // Filter through DOM to compare select with content of divs with class of property
            // If .property has match against select, add class active_select
            $('.property').removeClass('active_select').filter(':contains("' + selected + '")').addClass('active_select');
//This is where the extra dormant_select gets added to the 'all' option erroneously
            $('.property').removeClass('dormant_select').filter(':not(:contains('+ selected +'))').addClass('dormant_select');
}).change();
    });
})(jQuery);

当用户选择“全部”时，如何从所有元素中删除dormant_select和active_select的任何想法从下拉？

更新+解决方案

感谢Koala_dev，我通过一些改变得到了解决方案：

(function($){
    $(document).ready(function(){
        // Add an all function to default when page loads
        $("#selectList").prepend("<option value='all' selected>ALL</option>");
        $('#selectList').on('change', function () {
    // Set selected option into variable
    var selected = $(this).find('option:selected').text();

    if (selected == "ALL") {
        $('.property').removeClass('active_select dormant_select');
        return;
    }

    $('.property').filter(':contains("' + selected + '")').addClass('active_select').removeClass('dormant_select');
    $('.property').filter(':not(:contains(' + selected + '))').addClass('dormant_select').removeClass('active_select');
}).change();

    });


})(jQuery);

Answer 1

您只需添加一项检查即可查看是否已选择"All"并删除这些类：

$('#selectList').on('change', function () {
    // Set selected option into variable
    var selected = $(this).find('option:selected').text();

    if (selected == "All") {
        $('.property').removeClass('active_select dormant_select');
        return;
    }

    $('.property').removeClass('active_select').filter(':contains("' + selected + '")').addClass('active_select');
    $('.property').removeClass('dormant_select').filter(':not(:contains(' + selected + '))').addClass('dormant_select')
}).change();

从所有＆＃39;删除课程过滤选择

更新+解决方案

1 个答案: