Php jqueryajax从多个选择下拉表单以div显示多个页面

我有一个多选下拉列表。我需要一个div来填充基于选择的页面。我一次只能选一个。我需要它也工作时，我选择了一个以上的选项，相应的页面将填充div

例如。。。如果我选择Item1和Item2。我希望在我的div中显示item1.php和item2.php页面。如果我随后从选择中删除item1（使用selected.js），我只需要显示item2.php，因为这是当前唯一的选择

这是我目前的代码：

 $('#maindiv').on('change', function(event) {
      var selected = $(this).val();

      $.ajax({
            url: 'includes/'+ selected + '.php',
            type: 'POST',
            data: { cat: selected },

        })
        .done(function(data) {
            $('#displaydiv').html(data)
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

  });

。您无法从这里获得任何输出，但必须在服务器中使用它

有关页面是否获取的更多说明，请参见此。在这里，您可以看到将要加载的页面

jQuery:

$(function(){
    $('#maindiv').on('change', function(event) {
            $('#displaydiv').html("");
        selected = $(this).val() + "";
        arr = selected.split(",");
        i = 0;
        $(arr).each(function(){
            $.get('includes/'+ arr[i] + '.php', function( data ) {
              $('#displaydiv').append(data);
            });
            i++;
        });
    });
});

<select multiple id="maindiv">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> 
<div id="displaydiv">

</div>

HTML:

$(function(){
    $('#maindiv').on('change', function(event) {
            $('#displaydiv').html("");
        selected = $(this).val() + "";
        arr = selected.split(",");
        i = 0;
        $(arr).each(function(){
            $.get('includes/'+ arr[i] + '.php', function( data ) {
              $('#displaydiv').append(data);
            });
            i++;
        });
    });
});

<select multiple id="maindiv">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> 
<div id="displaydiv">

</div>

沃尔沃汽车
萨博
欧宝
奥迪

那么您现在的问题是什么？