如何从所选项目选项生成大多数出现值的递增列表？

Question

I have a form that has two event options, each event has 3 different items each and each item has 2-3 participants.

Event 1

1. Football – John, Mike, Sam
2. Cricket – Sam, Henry
3. Chess – Ross,Mike

Event 2

1. Guitar – Sam, Phillip
2. Drum – Steve, Ross
3. Piano – Mike, John

<form>
    <div>
        <h1>Select Event 1</h1>
        <select>
            <option>Football</option>
            <option>Cricket</option>
            <option>Chess</option>
        </select>
    </div>
    <div>
        <h1>Select Event 2</h1>
        <select>
            <option>Guitar</option>
            <option>Drum</option>
            <option>Piano</option>
        </select>
    </div>
    <input type="submit" /> 
</form>

How do I generate a result that makes a list of people who are involved on those selected items and he who has maximum participation among those events appears first and then the rest. Like, when someone selects 'Football' from Event 1 and 'Guitar' from Event 2, after submission, the result will be –

Participants

1. Sam
2. Henry, Phillip

How do I set the values of the options and how php or javascript can help me generate the result?

Answer 1

You can set an array of object for map your participants with the events. Here is a logic who can be implemented. It works for one event selection. You just have to loop into each select.

var participants = [{
  name:"Sam",
  events:["Football","Guitar"]
},{
  name:"Philip",
  events:["Drum","Cricket","Guitar"]
}];

$(".event-selection").change(function(){
  var selectedEvent = $(this).find("option:selected").text();
  var results = participants.filter(function(p){
    return p.events.indexOf(selectedEvent) > -1;
  }).map(function(p){return p.name}).join(", ");
  $(".results").text(results);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div>
        <h1>Select Event 1</h1>
        <select class="event-selection" id="event1">
            <option>Football</option>
            <option>Cricket</option>
            <option>Chess</option>
        </select>
    </div>
    <div>
        <h1>Select Event 2</h1>
        <select class="event-selection" id="event2">
            <option>Guitar</option>
            <option>Drum</option>
            <option>Piano</option>
        </select>
    </div>
</form>
<div class="results">
</div>

</div>