javascript - 使用 if/else if 函数根据选择中选择的选项执行不同的操作

Question

我想要一个下拉选择/选项菜单，根据您选择的选项执行不同的操作。

我的选择如下所示:

<div class="controls">
    <select id="classFilter">
        <option value="0" selected>All</option>
        <option value="1">Scion</option>
        <option value="2">Marauder</option>
        <option value="3">Ranger</option>
        <option value="4">Witch</option>
        <option value="5">Duelist</option>
        <option value="6">Templar</option>
        <option value="7">Shadow</option>
    </select>
</div>

这是我尝试使用的 if/else if:

$("#classFilter").change(function () {
    if ($('#classFilter option[value="0"]')) {
        console.log(this.value);
    }

    else if ($('#classFilter option[value="1"]')) {
        console.log(this.value);
    }

    else if ($('#classFilter option[value="2"]')) {
        console.log(this.value);
    }

    else if ($('#classFilter option[value="3"]')) {
        console.log(this.value);
    }

    else if ($('#classFilter option[value="4"]')) {
        console.log(this.value);
    }

    else if ($('#classFilter option[value="5"]')) {
        console.log(this.value);
    }

    else if ($('#classFilter option[value="6"]')) {
        console.log(this.value);
    }

    else if ($('#classFilter option[value="7"]')) {
        console.log(this.value);
    }
});

我尝试过使用.val()，但它也不起作用。切换选项时，无论我是否更改值，代码总是跳到第一个 if 。

另一个问题是我试图在这些 if 语句中调用一个函数，但它似乎也不起作用。是否无法调用select函数？

    function hardcoreTop100() {
        $("#IHC").click(function () {
            $.getJSON("http://api.pathofexile.com/ladders/Hardcore?limit=100&callback=?", function (result) {

                $.each(result["entries"], function (index, value) {

                    if (value.dead === true) {
                        $("#tdRanking").append(
                            "<tr>"
                            + "<td>" + value.rank + "</td>"
                            + "<td>" + value.account.name + "</td>"
                            + "<td id=\"dead\">" + value.character.name + "</td>"
                            + "<td>" + value.character.level + "</td>"
                            + "<td>" + value.character.experience + "</td>"
                            + "<td>" + value.character.class + "</td>"
                            + "<td>" + value.account.challenges.total + "</td>"
                            + "<td class=\"offline\">" + "</td>"
                            + "</tr>" + "<br/>");
                    }

                    else if (value.online === true) {
                        $("#tdRanking").append(
                            "<tr>"
                            + "<td>" + value.rank + "</td>"
                            + "<td>" + value.account.name + "</td>"
                            + "<td>" + value.character.name + "</td>"
                            + "<td>" + value.character.level + "</td>"
                            + "<td>" + value.character.experience + "</td>"
                            + "<td>" + value.character.class + "</td>"
                            + "<td>" + value.account.challenges.total + "</td>"
                            + "<td class=\"online\">" + "</td>"
                            + "</tr>" + "<br/>");
                    }

                    else {
                        $("#tdRanking").append(
                            "<tr>"
                            + "<td>" + value.rank + "</td>"
                            + "<td>" + value.account.name + "</td>"
                            + "<td>" + value.character.name + "</td>"
                            + "<td>" + value.character.level + "</td>"
                            + "<td>" + value.character.experience + "</td>"
                            + "<td>" + value.character.class + "</td>"
                            + "<td>" + value.account.challenges.total + "</td>"
                            + "<td class=\"offline\">" + "</td>"
                            + "</tr>" + "<br/>");
                    }
                });
            });

            $("td").remove("td");
            $("tr:empty").remove();

        });
    }

Answer 1

问题是您没有检查selected值。我建议使用switch而不是像下面这样的 if else 。

$("#classFilter").change(function () {
  switch(this.value) {
    case "0" : console.log(this.value); break;
    case "1" : console.log(this.value); break;
    case "2" : console.log(this.value); break;
    case "3" : console.log(this.value); break;
    case "4" : console.log(this.value); break;
    case "5" : console.log(this.value); break;
    case "6" : console.log(this.value); break;
    case "7" : console.log(this.value); break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
    <select id="classFilter">
        <option value="0" selected>All</option>
        <option value="1">Scion</option>
        <option value="2">Marauder</option>
        <option value="3">Ranger</option>
        <option value="4">Witch</option>
        <option value="5">Duelist</option>
        <option value="6">Templar</option>
        <option value="7">Shadow</option>
    </select>
</div>