DevExpress / Extreme dxSelectBox

Question

我对devExpress dxSelectBox有2个问题。

1. 我选择一个项目表单后，下拉列表输入框变为可编辑。这不是页面加载，我不知道为什么。

2. 无法在主框中显示标志图标，但可以在下拉列表项中显示 这就是它的样子：



这是一个代码： 的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

第一点：

您正在使用deprecated fieldEditEnabled选项。请改为使用 acceptCustomValue选项。

第二点：

您正尝试在.lang元素内渲染图像。 接下来，在dxTextBox div上创建.lang。因此，所有内部标记都替换为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。