CODEWITHSUNDEEP
javascriptjqueryselectmethod-call
Lapahn
Lapahn

Reputation: 37

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

I would like to have a dropdown select/option menu that does different things depending on which option you choose.

My select looks like this:

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

And here's the if / else if I'm trying to use:

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

I've tried using .val() but it didn't work either. While switching the options the code always jumps into the first if no matter if I change the value.

Another problem is that I'm trying to call a function inside these if statements, but it doesn't seem to work either. Is it not possible to call a function for 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();

        });
    }

Upvotes: 0

Views: 517

Answers (5)

drox2014
drox2014

Reputation: 93

I think the problem is with selected attribute that you used inside the option tag.

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

Follow this link for further details

This will work for your JavaScript function.

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

Upvotes: 1

Shilly
Shilly

Reputation: 8589

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

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 370999

If you're going to go that route, you also need to check that the option with said value is :selected, and that the length of the collection is not 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>

But you might find it easier to use an object (indexed by value) of functions instead:

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>

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can read the value of select box and then compare it in if else block. See below code

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

Upvotes: 1

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

The problem being that you are not checking for selected value. I would suggest to use switch instead of if else here like following.

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

Upvotes: 2

Related Questions