Dropdown menu changes its preselect when an if statement is used

I have a dropdown menu with a preselected option and when I use an if statement later in the code saying that if one dropdown menu option is selected then it will show my text but it then changes the preselected to my if statements selection. That may be very confusing.

            <p>
                Filter Products By:
                <select id="sbProductsFilter" onchange="displayProducts();">
                    <option id ="All" >All</option>
                    <option id = "Expired" selected>Expired</option>
                    <option id = "NotExpired" >NotExpired</option>
                </select>
            </p>

            <!-- Products Output -->
            <span><strong>Department | Product | Price ($) | Shelf Life</strong></span>
            <div id="productOutput">[Print Products here...]</div>
        </form>
    </fieldset>
    <br>


    <script>

            var food1 = new Product( "Avacados",             "Produce" ,     8.99,       ("June 27, 2019") );
        var food2 = new Product( "<br/>Baguette",             "Bakery" ,      5.99,       ("July 30, 2019") );
        var food3 = new Product( "<br/>Beef",                 "Deli" ,        14.99,      ("April 1, 2019") );
        var food4 = new Product( "<br/>Pears",                "Produce" ,     5.50,       ("April 2, 2019") );
        var food5 = new Product( "<br/>2L Chocolate Milk",    "Dairy" ,       4.99,       ("March 21, 2019") );
        var food6 = new Product( "<br/>Pumpkin Pie",          "Bakery" ,      10.50,      ("March 13, 2019") );
        var food7 = new Product( "<br/>Grapes",               "Produce" ,     6.99,       ("February 1, 2018") );
        var food8 = new Product( "<br/>Loaf of Bread",        "Bakery" ,      5.99,       ("March 30, 2019") );
        var food9 = new Product( "<br/>Cheddar Cheese",       "Dairy" ,       10.99,      ("March 14, 2019") );
        var food10 = new Product( "<br/>Margarine",            "Dairy" ,       8.99,       ("June 14, 2017") ) ;
        var food11 = new Product( "<br/>Salami",               "Deli" ,        5.99,       ("March 13, 2019") );
        var food12 = new Product( "<br/>Oranges",              "Produce" ,     7.50,       ("May 2, 2019") );
        var food13 = new Product( "<br/>Chicken",              "Deli" ,        21.99,      ("March 22, 2019") );
        var food14 = new Product( "<br/>Turkey",               "Deli" ,        14.99,      ("April 3, 2019") );
        var food15 = new Product( "<br/>Peppers",              "Produce" ,     3.99,       ("March 27, 2019") );
        var food16 = new Product( "<br/>Ham",                  "Deli" ,        9.99,       ("May 5, 2019") );
        var food17 = new Product( "<br/>Chocolate Cake",       "Bakery" ,      19.99,      ("October 10, 2007") );
        var food18 = new Product( "<br/>10kg White Flour",     "Bakery" ,      12.99,      ("September 30, 2020") );


        products.push(food1.fullproduct());
        products.push(food2.fullproduct());
        products.push(food3.fullproduct());
        products.push(food4.fullproduct());
        products.push(food5.fullproduct());
        products.push(food6.fullproduct());
        products.push(food7.fullproduct());
        products.push(food8.fullproduct());
        products.push(food9.fullproduct());
        products.push(food10.fullproduct());
        products.push(food11.fullproduct());
        products.push(food12.fullproduct());
        products.push(food13.fullproduct());
        products.push(food14.fullproduct());
        products.push(food15.fullproduct());
        products.push(food16.fullproduct());
        products.push(food17.fullproduct());
        products.push(food18.fullproduct());

        if (document.getElementById("All").selected = "true"){
            document.getElementById('productOutput').innerHTML = products 
             }

    </script>
</body>

My page should load with the Expired dropdown preselected and when I select the All dropdown option it should display all of the array.