Your search did not match any results.
SelectBox

Overview

Documentation
The SelectBox widget is an editor that allows an end user to select an item from a drop-down list.
Copy to CodePen
Apply
Reset
$(function(){ $("#products-simple").dxSelectBox({ items: simpleProducts }); $("#products-placeholder").dxSelectBox({ items: simpleProducts, placeholder: "Choose Product", showClearButton: true }); $("#products-read-only").dxSelectBox({ items: simpleProducts, value: simpleProducts[0], readOnly: true }); $("#products-disabled").dxSelectBox({ items: simpleProducts, value: simpleProducts[0], disabled: true }); $("#products-data-source").dxSelectBox({ dataSource: new DevExpress.data.ArrayStore({ data: products, key: "ID" }), displayExpr: "Name", valueExpr: "ID", value: products[0].ID, }); $("#products-custom").dxSelectBox({ dataSource: products, displayExpr: "Name", valueExpr: "ID", value: products[3].ID, fieldTemplate: function(data, container) { var result = $("<div class='custom-item'><img src='" + data.ImageSrc + "' /><div class='product-name'></div></div>"); result .find(".product-name") .dxTextBox({ value: data.Name, readOnly: true }); container.append(result); }, itemTemplate: function(data) { return "<div class='custom-item'><img src='" + data.ImageSrc + "' /><div class='product-name'>" + data.Name + "</div></div>"; } }); $("#product-handler").dxSelectBox({ items: simpleProducts, value: simpleProducts[0], onValueChanged: function(data) { $(".current-value > span").text(data.value); } }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.light.css" /> <link rel="dx-theme" data-theme="android5.light" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.android5.light.css" /> <link rel="dx-theme" data-theme="ios7.default" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.ios7.default.css" /> <link rel="dx-theme" data-theme="win10.black" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.win10.black.css" /> <link rel="dx-theme" data-theme="win10.white" href="https://cdn3.devexpress.com/jslib/17.1.6/css/dx.win10.white.css" /> <script src="https://cdn3.devexpress.com/jslib/17.1.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type ="text/css" href ="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Default mode</div> <div class="dx-field-value"> <div id="products-simple"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">With a custom placeholder</div> <div class="dx-field-value"> <div id="products-placeholder"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Read only</div> <div class="dx-field-value"> <div id="products-read-only"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <div id="products-disabled"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Data source usage</div> <div class="dx-field-value"> <div id="products-data-source"></div> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom templates</div> <div class="dx-field-value"> <div id="products-custom"></div> </div> </div> </div> <div class="dx-fieldset"> <div class="dx-fieldset-header">Event Handling</div> <div class="dx-field"> <div class="dx-field-label">Product</div> <div class="dx-field-value"> <div id="product-handler"></div> </div> </div> <div class="current-value"> Selected product is <span>HD Video Player</span> </div> </div> </div> </div> </body> </html>
.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 .product-name { display: inline-block; padding-left: 45px; text-indent: 0; line-height: 30px; font-size: 15px; } .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; }
var simpleProducts = [ "HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50", "SuperLED 42", "SuperLCD 55", "SuperLCD 42", "SuperPlasma 65", "SuperLCD 70", "Projector Plus", "Projector PlusHT", "ExcelRemote IR", "ExcelRemote BT", "ExcelRemote IP" ]; var products = [{ "ID": 1, "Name": "HD Video Player", "Price": 330, "Current_Inventory": 225, "Backorder": 0, "Manufacturing": 10, "Category": "Video Players", "ImageSrc": "../../../../images/products/1-small.png" }, { "ID": 2, "Name": "SuperHD Player", "Price": 400, "Current_Inventory": 150, "Backorder": 0, "Manufacturing": 25, "Category": "Video Players", "ImageSrc": "../../../../images/products/2-small.png" }, { "ID": 3, "Name": "SuperPlasma 50", "Price": 2400, "Current_Inventory": 0, "Backorder": 0, "Manufacturing": 0, "Category": "Televisions", "ImageSrc": "../../../../images/products/3-small.png" }, { "ID": 4, "Name": "SuperLED 50", "Price": 1600, "Current_Inventory": 77, "Backorder": 0, "Manufacturing": 55, "Category": "Televisions", "ImageSrc": "../../../../images/products/4-small.png" }, { "ID": 5, "Name": "SuperLED 42", "Price": 1450, "Current_Inventory": 445, "Backorder": 0, "Manufacturing": 0, "Category": "Televisions", "ImageSrc": "../../../../images/products/5-small.png" }, { "ID": 6, "Name": "SuperLCD 55", "Price": 1350, "Current_Inventory": 345, "Backorder": 0, "Manufacturing": 5, "Category": "Televisions", "ImageSrc": "../../../../images/products/6-small.png" }, { "ID": 7, "Name": "SuperLCD 42", "Price": 1200, "Current_Inventory": 210, "Backorder": 0, "Manufacturing": 20, "Category": "Televisions", "ImageSrc": "../../../../images/products/7-small.png" }, { "ID": 8, "Name": "SuperPlasma 65", "Price": 3500, "Current_Inventory": 0, "Backorder": 0, "Manufacturing": 0, "Category": "Televisions", "ImageSrc": "../../../../images/products/8-small.png" }, { "ID": 9, "Name": "SuperLCD 70", "Price": 4000, "Current_Inventory": 95, "Backorder": 0, "Manufacturing": 5, "Category": "Televisions", "ImageSrc": "../../../../images/products/9-small.png" }, { "ID": 10, "Name": "DesktopLED 21", "Price": 175, "Current_Inventory": 0, "Backorder": 425, "Manufacturing": 75, "Category": "Monitors", "ImageSrc": "../../../../images/products/10-small.png" }, { "ID": 11, "Name": "DesktopLED 19", "Price": 165, "Current_Inventory": 425, "Backorder": 0, "Manufacturing": 110, "Category": "Monitors", "ImageSrc": "../../../../images/products/11-small.png" }, { "ID": 12, "Name": "DesktopLCD 21", "Price": 170, "Current_Inventory": 210, "Backorder": 0, "Manufacturing": 60, "Category": "Monitors", "ImageSrc": "../../../../images/products/12-small.png" }, { "ID": 13, "Name": "DesktopLCD 19", "Price": 160, "Current_Inventory": 150, "Backorder": 0, "Manufacturing": 210, "Category": "Monitors", "ImageSrc": "../../../../images/products/13-small.png" }, { "ID": 14, "Name": "Projector Plus", "Price": 550, "Current_Inventory": 0, "Backorder": 55, "Manufacturing": 10, "Category": "Projectors", "ImageSrc": "../../../../images/products/14-small.png" }, { "ID": 15, "Name": "Projector PlusHD", "Price": 750, "Current_Inventory": 110, "Backorder": 0, "Manufacturing": 90, "Category": "Projectors", "ImageSrc": "../../../../images/products/15-small.png" }, { "ID": 16, "Name": "Projector PlusHT", "Price": 1050, "Current_Inventory": 0, "Backorder": 75, "Manufacturing": 57, "Category": "Projectors", "ImageSrc": "../../../../images/products/16-small.png" }, { "ID": 17, "Name": "ExcelRemote IR", "Price": 150, "Current_Inventory": 650, "Backorder": 0, "Manufacturing": 190, "Category": "Automation", "ImageSrc": "../../../../images/products/17-small.png" }, { "ID": 18, "Name": "ExcelRemote BT", "Price": 180, "Current_Inventory": 310, "Backorder": 0, "Manufacturing": 0, "Category": "Automation", "ImageSrc": "../../../../images/products/18-small.png" }, { "ID": 19, "Name": "ExcelRemote IP", "Price": 200, "Current_Inventory": 0, "Backorder": 325, "Manufacturing": 225, "Category": "Automation", "ImageSrc": "../../../../images/products/19-small.png" }];