Question

当不包括第二个脚本时，附加的项目工作得很好（这使列表框看起来像一个带有复选框的光滑的列表框） - 但是当我包含它时，它不会附加项目。

有什么理由吗？

JQuery的：

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <style>

    #stripe path {
      stroke: #fff;
      stroke-width: 2px;
    }
    .stripe {
      mask: url("#mask");
    }
    .blue.stripe {
      fill: #00f;
    }
    .red.stripe {
      fill: #f00;
    }
</style>
</head>
<body>
  <svg height="500" width="500">
  <defs>
    <pattern id="stripe" patternUnits="userSpaceOnUse" width="4" height="4">
      <path d="M-1,1 l2,-2
               M0,4 l4,-4
               M3,5 l2,-2" />
    </pattern>
    <mask id="mask">
      <rect height="100%" width="100%" style="fill: url(#stripe)" />
    </mask>
  </defs>
  <g>
    <g class="stripe">
      <rect width="100" height="50" y="0" />
    </g>
    <g class="red stripe">
      <rect width="100" height="50" y="50" />
    </g>
    <g class="blue stripe">
      <rect width="100" height="50" y="100" />
    </g>
  </g>
</svg>
</body>
</html>

查看：

$("#ddlistcategory").change(function () {
        var catItem = $("#ddlistcategory").val();

        $("#ddlistaccountitems").empty();
        $.ajax({
                url: '@Url.Action("GetCategories", "Account")',
                dataType: "json",
                type: "Post",
                data: { "i": catItem },
                success: function (data) {

                    $.each(data, function (key, val) {
                        //alert(key + " " + val);
                        $("#ddlistaccountitems").append('<option id="' + key + '">' + val + '</option>');
                    })
                }
            });
        });

$('#ddlistaccountitems').multiselect({
    includeSelectAllOption: false,
    allSelectedText: 'No option left ...',
    enableFiltering: true,
    filterPlaceholder: 'Search for something...'
});

Answer 1

您在ajax方法之外调用multiselect，该方法使用选项填充元素。因此，您将在ajax完成之前初始化它，因此问题很可能是初始化还没有构建的选项。

要解决此问题，请将初始化移至success方法，以便在ajax完成后执行，并创建所需的所有数据。

Answer 2

您的Ajax调用将异步工作。也就是说，.multiselect将在附加选项之前执行。 .multiselect会隐藏您的实际select并将其替换为自定义html。所以你必须在.multiselect执行之前填写它。添加

async: false

在Ajax中调用或调用

$('#ddlistaccountitems').multiselect()

里面的成功功能。

使用多选列表框时未显示附加项目

2 个答案: