diff --git a/IPython/html/static/notebook/js/widgets/widget_selection.js b/IPython/html/static/notebook/js/widgets/widget_selection.js
index 54e787d..bdca009 100644
--- a/IPython/html/static/notebook/js/widgets/widget_selection.js
+++ b/IPython/html/static/notebook/js/widgets/widget_selection.js
@@ -58,7 +58,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
if (options === undefined || options.updated_view != this) {
var selected_item_text = this.model.get('value_name');
- if (selected_item_text.length === 0) {
+ if (selected_item_text.trim().length === 0) {
this.$droplabel.html(" ");
} else {
this.$droplabel.text(selected_item_text);
@@ -233,18 +233,24 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
var items = this.model.get('value_names');
var disabled = this.model.get('disabled');
var that = this;
+ var item_html;
_.each(items, function(item, index) {
- var item_query = ' :contains("' + item + '")';
- if (that.$buttongroup.find(item_query).length === 0) {
- $('')
+ if (item.trim().length == 0) {
+ item_html = " ";
+ } else {
+ item_html = IPython.utils.escape_html(item);
+ }
+ var item_query = '[data-value="' + item + '"]';
+ var $item_element = that.$buttongroup.find(item_query);
+ if (!$item_element.length) {
+ $item_element = $('')
.attr('type', 'button')
.addClass('btn')
- .text(item)
+ .html(item_html)
.appendTo(that.$buttongroup)
+ .attr('data-value', item)
.on('click', $.proxy(that.handle_click, that));
}
-
- var $item_element = that.$buttongroup.find(item_query);
if (that.model.get('value_name') == item) {
$item_element.addClass('active');
} else {
@@ -255,7 +261,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// Remove items that no longer exist.
this.$buttongroup.find('button').each(function(i, obj) {
- var value = $(obj).text();
+ var value = $(obj).data('value');
var found = false;
_.each(items, function(item, index) {
if (item == value) {
@@ -285,7 +291,7 @@ define(["notebook/js/widgets/widget"], function(WidgetManager){
// Calling model.set will trigger all of the other views of the
// model to update.
- this.model.set('value_name', $(e.target).text(), {updated_view: this});
+ this.model.set('value_name', $(e.target).data('value'), {updated_view: this});
this.touch();
},
});