HTML list sorting filter

Alex Lord
Alex Lord used Ask the Experts™
on
Any Recommendations on where to look to re order a list based on input, i have a list that has switches and what i am trying to do is some filtering to display checked switches

$("#check-sort-list").on('change', function() {
       var get_selected = $(this).val();
        
        alert(get_selected);
        
        if(get_selected == 1)
            {
                console.log(get_selected);
            }
        
        else if(get_selected == 2)
            {
                console.log(get_selected);
            }
        
        else if(get_selected == 3)
            {
                console.log(get_selected);
            } else 
                {console.log("No selection");}
    });

Open in new window



my list is just a normal html list with a label and a checkbox.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Please show us the list and what you are wanting to use to sort it.

I am assuming <ul> ?

This is confusing. Name suggests checkbox - usage suggests dropdown
$("#check-sort-list").on('change', function() {
       var get_selected = $(this).val();

Open in new window


The rest of the code says nothing about what you want to do re sorting - what criteria do you use to sort
- Free form entry
- Checkbox / drop down selection

What in the list is used as the sorting field?
Multitechnician
Top Expert 2014
Commented:
Test page : http://jsfiddle.net/es8ypn5u/

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        jQuery(function($) {
            var arrClass = { 1: "one", 2: "two", 3: "three"};
            var sortList = function() {
                $("#mylist li").hide();
                $(".check-sort-list:checked").each(function() {
                    var checkboxValue = $(this).val();
                    var classToDisplay = arrClass[ checkboxValue ];
                    $("#mylist li." + classToDisplay).show();
                });
            };
            $(".check-sort-list").on('change', sortList);
            sortList();
        });
    </script>
</head>
<body>
<input type="checkbox" class="check-sort-list" value="1" checked="checked">1<br>
<input type="checkbox" class="check-sort-list" value="2">2<br>
<input type="checkbox" class="check-sort-list" value="3">3<br>
<ul id="mylist">
    <li class="one">my number(s) : 1</li>
    <li class="one two">my number(s) : 1 2</li>
    <li class="one three">my number(s) : 1 3</li>
    <li class="two">my number(s) : 2</li>
    <li class="three">my number(s) : 3</li>
</ul>
</body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial