DevExpress/Extreme dxSelectBox

Question

У меня есть 2 проблемы с devExpress dxSelectBox.

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

Первая точка:

Вы используете 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, а также.