使用 if / else if 函数根据 select 中选择的选项做不同的事情

Question

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

我的 select 看起来像这样：

<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，并且集合的长度不是 0:

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

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

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

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

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

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

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

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

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

但您可能会发现使用函数对象（按值索引）更容易：

const optionFns = {
  0: () => console.log('default option!'),
  1: () => console.log('you chose value 1!'),
  2: () => console.log('Marauder!'),
  3: () => console.log('Ranger...'),
}

$("#classFilter").change(function () {
  const value = $('#classFilter option:selected').val();
  optionFns[value]();
});

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

Answer 2

问题在于您没有检查 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>

Answer 3

你可以读取select框的值，然后在if else块中进行比较。见下面代码

$("#classFilter").change(function () {
        var value = $(this).val();
        if(value=="0") {
        console.log(value);
       } else if(value=="0") {
        console.log(value);
       } else if(value=="1") {
        console.log(value);
       } else if(value=="2") {
        console.log(value);
       } else if(value=="3") {
        console.log(value);
       } else if(value=="4") {
        console.log(value);
       } else if(value=="5") {
        console.log(value);
       } else if(value=="6") {
        console.log(value);
       } else if(value=="7") {
        console.log(value);
       }
});

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

Answer 4

// We can get the selected value from the select itsself, not the options.
const selected_class = $("#classSelection").val();
// A function we want to use differently depending on what was selected.
const create_class = function( attr_str, attr_con, attr_int ) {
  // create a new character with these stats.
  return 'creating new class with stats: ' + attr_str + '|' + attr_con + '|' + attr_int;
};
// Might as well use an object to store the function calls instead of a list of if/else statements. It's easier to add extra options this way.
const class_functions = {
  all: function() {
    // create one of each class
  },
  duelist: function() {
    return create_class( 18, 14, 8 );
  },
  marauder: function() {
    return create_class( 20, 16, 4 );
  },
  ranger: function() {
    return create_class( 14, 14, 12 );
  },
  scion: function() {
    return create_class( 12, 20, 10 );
  },
  shadow: function() {
    return create_class( 12, 12, 16 );
  },
  templar: function() {
    return create_class( 16, 12, 14 );
  },
  witch: function() {
    return create_class( 8, 8, 20 );
  }
};
// Create the selected class. Scion is selected in the dropdown.
const character = class_functions[ selected_class ]();
console.log( character );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="classSelection">
  <option value="all">All</option>
  <option value="scion" selected>Scion</option>
  <option value="marauder">Marauder</option>
  <option value="ranger">Ranger</option>
  <option value="witch">Witch</option>
  <option value="duelist">Duelist</option>
  <option value="templar">Templar</option>
  <option value="shadow">Shadow</option>
</select>

Answer 5

我认为问题出在您在选项标签内使用的 selected 属性。

<select id="classFilter">
   <option value="0"  selected="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>

关注此 link 了解更多详情

这将适用于您的 JavaScript 功能。

$("select#classFilter").on('change', function(e){
   console.log($("select#classFilter").val());
});

使用 if / else if 函数根据 select 中选择的选项做不同的事情

Using if / else if function to do different things depending on the option chosen inside a select

javascript

jquery

select

method-call