时间戳

首页 > 解决方案 > 使用 if 语句时，下拉菜单会更改其预选

javascript - 使用 if 语句时，下拉菜单会更改其预选

问题描述

我有一个带有预选选项的下拉菜单，当我稍后在代码中使用 if 语句时，如果选择了一个下拉菜单选项，那么它将显示我的文本，但随后会将预选更改为我的 if 语句选择。这可能非常令人困惑。

            <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>

我的页面应该加载预选的 Expired 下拉列表，当我选择 All 下拉选项时，它应该显示所有数组。

标签： javascriptif-statementdrop-down-menu

解决方案

您正在尝试检查option元素以查看它是否被选中，但存在两个问题：

  1. 您没有使用比较运算符（==或===），您使用的是赋值运算符（=），因此您错误地将其分配给字符串"true"。
  2. 相反，您应该检查select元素以查看它value是否是第一个option元素。
if (document.getElementById("sbProductsFilter").value === "All"){
    document.getElementById('productOutput').innerHTML = products 
}

有关比较运算符的更多信息，请参阅this 。

推荐阅读