使用if / else if函数根据select内部选择的选项执行不同的操作

时间：2018-07-13 07:14:01

标签： javascript jquery select method-call

我希望有一个下拉选择/选项菜单，该菜单根据您选择的选项执行不同的操作。

我的选择如下：

<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();

        });
    }

5 个答案:

答案 0 :(得分：2)

如果要走这条路线，还需要检查具有上述值的选项为: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>

答案 1 :(得分：2)

问题是您没有检查selected的值。我建议使用switch代替下面的其他用法。

$("#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>

答案 2 :(得分：1)

您可以读取选择框的值，然后将其与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>

答案 3 :(得分：1)

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

答案 4 :(得分：1)

我认为问题出在选项标签中使用的所选属性。

<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());
});
相关问题
最新问题