DropDownList格式化？

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