Question

我有一个多选下拉菜单。我需要一个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");
        });

  });

Answer 1

jsfiddle Link。您无法从此处获得任何输出，但必须在服务器中使用此输出。

有关页面的详细说明，请参阅此jsfiddle link。在这里，您可以看到将加载的页面。

<强> 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++;
        });
    });
});

<强> HTML：

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

jquery ajax从多个选择下拉列表中显示div中的多个页面

1 个答案: