javascript - 如何从所选项目选项中生成最常出现的值的递增列表？

Question

我有一个包含两个事件选项的表单，每个事件都有 3 个不同的项目，每个项目有 2-3 名参与者。

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>

如何生成一个结果，列出参与这些选定项目的人员列表，以及在这些事件中参与最多的人员首先出现，然后是其余的。例如，当有人从事件 1 中选择“足球”并从事件 2 中选择“吉他”时，提交后的结果将是 –

Participants

1. Sam
2. Henry, Phillip

如何设置选项的值以及 php 或 javascript 如何帮助我生成结果？

Answer 1

您可以设置对象的数组来将参与者与事件进行映射。这是一个可以实现的逻辑。它适用于一个事件选择。您只需循环进入每个选择。

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>