DevExpress/Extreme dxSelectBox

Question

我有 2 个关于 devExpress dxSelectBox 的问题。

在我选择一个项目后，表单下拉列表输入框变成可编辑的。它不在页面加载中，我不知道为什么。
无法在主框中显示旗帜图标，但可以在下拉列表项中显示这是它的样子：

这是一个代码： javascript:

var langs = [{
    'Name': 'English',
    "ImageSrc": '/static/img/flags/United-States-icon.png',
    'value': 'en'
}, {
    'Name': '中文',
    "ImageSrc": '/static/img/flags/China-icon.png',
    'value': 'zh'
}]

$(function(){
    $("#language").dxSelectBox({
            dataSource: langs,
            displayExpr: "Name",
            valueExpr: "value",
            value: langs[0].value,
            acceptCustomValue: false,
            fieldEditEnabled: false,
            height: 'auto',
            width: '100',
            fieldTemplate: function(data, container) {
                var result = $("<div class='custom-item'><div class='lang'>" +
                    "<img src='" + data["ImageSrc"] +
                    "' /></div></div>");
                result.find(".lang").dxTextBox({ value: data['Name'] });
                container.append(result);
            },
            itemTemplate: function(data) {
                return "<div class='custom-item'>" + "<div class='lang'>" +
                     data['Name'] + "<img src='" +
                     data['ImageSrc']+ "' /></div></div>";
            },
            valueChangeEvent: function(data) {
                window.location.replace('https://www.google.com')
            }
    });
});

css:

.dx-dropdownlist-popup-wrapper .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
    padding-left: 7px;
    padding-right: 7px;
}

.custom-item {
    position: relative;
    min-height: 30px;
}

.custom-item .language {
    display: inline-block;
    padding-left: 10px;
    text-indent: 0;
    line-height: 30px;
    font-size: 12px;
}

/*.custom-item > img {*/
    /*left: 1px;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*!*margin-top: -15px;*!*/
/*}*/

.custom-item .dx-texteditor-buttons-container {
    display: none;
}
.current-value {
    padding: 10px 0;
}

.current-value > span {
    font-weight: bold;
}

Answer 1

第一点：

您正在使用 fieldEditEnabled 选项，即 deprecated。使用 only 而不是 acceptCustomValue 选项。

第二点：

您正在尝试在 .lang 元素内渲染图像。接下来，您在 .lang div 上创建一个 dxTextBox。因此，所有内部标记都替换为 dxTextBox 标记。嗯，你可以把你的图片放在 .lang div:

旁边

 var result = $("<div class='custom-item'><div class='lang'></div></div>");
 result.find(".lang").dxTextBox({ value: data['Name'] });
 result.append("<img class='selected-item-image' src='" + data["ImageSrc"] + "' />");
 container.append(result);

我也创建了 fiddle。

DevExpress/Extreme dxSelectBox

DevExpress/Extreme dxSelectBox

javascript

css

devexpress

devextreme