jquery - 下拉列表格式？

Question

有没有办法像图片一样格式化下拉列表，当我单击下拉列表时，我在其中显示两个字段列？如果是这样，可以使用 HTML5 datalist 或 jquery 来完成吗？

Answer 1

您可以使用 IgniteUI 库来控制 Combobox 的样式。我创建了一个演示 here

HTML

<div id="combo"></div>

Javascript

$(function () {

    var data = [{
        "ID": 1,
            "Name": "John Smith",
            "Age": 45
    }, {
        "ID": 2,
            "Name": "Mary Johnson",
            "Age": 32
    }, {
        "ID": 3,
            "Name": "Bob Ferguson",
            "Age": 27
    }];

    $("#combo").igCombo({
        dataSource: data, //JSON Array defined above         
        valueKey: "ID",
        textKey: "Name",
        width: "360px",
        itemTemplate: "<div class='comboItemContainer'><div class='colOne'>${Name}</div><div class='colTwo'>${Age}</div></div>"
    });

});

CSS

.comboItemContainer {
    width: auto;
    font-family:"Courier New", Courier, monospace;
}
.colOne {
    border-right: 1px dashed gray;
    float: left;
    width: 300px
}
.colTwo {
    float: left;
    padding-left: 5px;
}