Dropdown menu changes its preselect when an if statement is used

Question

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.

Scott Marcus · Answer 1 · 2019-03-29T20:32:32.463

0

You are trying to check the option element to see if it is selected, but there are two issues there:

You are not using the comparison operator (== or ===), you are using the assignment operator (=) and therefore you are incorrectly assigning it to the string "true".
Instead you should check the select element to see if its value is the first option element.

if (document.getElementById("sbProductsFilter").value === "All"){
    document.getElementById('productOutput').innerHTML = products 
}

See this for more on comparison operators.

edited Mar 29 '19 at 20:32

answered Mar 29 '19 at 20:22

Scott Marcus

64,069
6
49
71

Charlie, that fixes the preselect but now the if statement won't work, it will not load the products when All is selected – JK4 Mar 29 '19 at 20:24
@JaceKendel Check my updated answer. You were using the `=` instead of `===` and so you were assigning the value instead of checking it. – Scott Marcus Mar 29 '19 at 20:29

Dropdown menu changes its preselect when an if statement is used

1 Answers1