4

在我的一个 ASP.Net 项目中，我使用了 selected-image ( https://github.com/djgrant/chosen-image ) 将图像添加到下拉列表。

我也添加了选择的库。一切正常。如果我在文档加载功能中使用以下代码，它将创建选择的列表视图。

 $(document).ready(function () {
          $(".chosen-select").chosen({
              disable_search_threshold: 10
                 });
    }

然后我想将图像添加到列表视图。所以我添加了 selected-image js 文件和 css 文件并将上面的代码更改如下。

$(document).ready(function () {
              $(".chosen-select").chosenImage({
                  disable_search_threshold: 10
                     });
        }

在后端，我将图像绑定到列表视图。

protected void Bind_BuyerImages() {
        if (cmbBuyer != null)
        {
            foreach (ListItem li in cmbBuyer.Items)
            {
                li.Attributes["data-img-src"] = "../Buyers/" + li.Value; 
            }
        }
    }

在列表视图中显示所有图像，但页面不断刷新。我怎样才能防止这种情况？

4

1 回答 1

1

我不知道结果chosenImage应该是什么样子，因为我看不到 中的示例Git，但是有一个分叉chosen版本允许您自定义可以从这里item使用的内部list

然后你可以像这样调用函数

$('.chosen-select').chosen({
    template: function (text, templateData) {
        return "<img src='" + templateData.imgsrc + "'></img> <span>" + text + "</span>";
    }
});

如果您需要更改 的样式item，只需class为其添加模板（对于本示例），img然后使用spanclassCSS

然后当您绑定时，将其list更改为

foreach (ListItem li in cmbBuyer.Items)
{
    li.Attributes["data-imgsrc"] = "../Buyers/" + li.Value; 
}

编辑：

我重新检查后，它只在template函数中传递了2个参数，所以你需要改变

template: function (text, value, templateData)

至

template: function (text, templateData)

这是自定义模板的示例：演示（CSS我在 Fiddle 中尝试时未加载），尝试将您的模板更改为您需要的模板。

于 2014-11-14T05:29:28.043 回答