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元素內的圖像。 接下來，您在.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爲好。