Grant the select widget the ability to select multiple values.

Multiple values are placed in a given tiddler-field combination as if
that field were a list field.

core/modules/widgets/select.js

@@ -51,7 +51,12 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
 Handle a change event
 */
 SelectWidget.prototype.handleChangeEvent = function(event) {
-	var value = this.getSelectDomNode().value;
+	if(this.selectMultiple == false) {
+		var value = this.getSelectDomNode().value;
+	} else {
+		var value = this.getSelectValues();
+				value = value.map(function(s) { return "[["+s+"]]"}).join(" ");
+	}
 	this.wiki.setText(this.selectTitle,this.selectField,this.selectIndex,value);
 };
 
@@ -81,9 +86,21 @@ SelectWidget.prototype.setSelectValue = function() {
 		}
 	}
 	// Assign it to the select element if it's different than the current value
-	var domNode = this.getSelectDomNode();
-	if(domNode.value !== value) {
-		domNode.value = value;
+	if (this.selectMultiple) {
+		value = value === undefined ? "" : value;
+		var select = this.getSelectDomNode();
+		var values = Array.isArray(value) ? value : value.split(",");
+		for(var i=0; i < select.children.length; i++){
+			if(values.indexOf(select.children[i].value) != -1) {
+				select.children[i].selected = true;
+			}
+		}
+		
+	} else {
+		var domNode = this.getSelectDomNode();
+		if(domNode.value !== value) {
+			domNode.value = value;
+		}
 	}
 };
 
@@ -94,6 +111,22 @@ SelectWidget.prototype.getSelectDomNode = function() {
 	return this.children[0].domNodes[0];
 };
 
+// Return an array of the selected opion values
+// select is an HTML select element
+SelectWidget.prototype.getSelectValues = function() {
+	var select = this.getSelectDomNode()
+	var result = [];
+	var options = select && select.options;
+	var opt;
+	for (var i=0, iLen=options.length; i<iLen; i++) {
+		opt = options[i];
+		if (opt.selected) {
+			result.push(opt.value || opt.text);
+		}
+	}
+	return result;
+}
+
 /*
 Compute the internal state of the widget
 */
@@ -104,6 +137,7 @@ SelectWidget.prototype.execute = function() {
 	this.selectIndex = this.getAttribute("index");
 	this.selectClass = this.getAttribute("class");
 	this.selectDefault = this.getAttribute("default");
+	this.selectMultiple = this.getAttribute("multiple", false);
 	// Make the child widgets
 	var selectNode = {
 		type: "element",
@@ -113,6 +147,9 @@ SelectWidget.prototype.execute = function() {
 	if(this.selectClass) {
 		$tw.utils.addAttributeToParseTreeNode(selectNode,"class",this.selectClass);
 	}
+	if(this.selectMultiple) {
+		$tw.utils.addAttributeToParseTreeNode(selectNode,"multiple","multiple");
+	}
 	this.makeChildWidgets([selectNode]);
 };
 
@@ -137,4 +174,4 @@ SelectWidget.prototype.refresh = function(changedTiddlers) {
 
 exports.select = SelectWidget;
 
-})();
+})();

editions/tw5.com/tiddlers/widgets/SelectWidget.tid

@@ -1,10 +1,3 @@
-caption: select
-created: 20131024141900000
-modified: 20141203155137508
-tags: Widgets
-title: SelectWidget
-type: text/vnd.tiddlywiki
-
 ! Introduction
 
 The select widget displays a popup menu based on a [[HTML select element|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select]]. The popup (or dropdown) contains a list of items defined by `<option>` and `<optgroup>` elements. 
@@ -99,3 +92,17 @@ This example uses a nested pair of list widgets. The outer one generates the `<o
 </optgroup>
 </$list>
 </$select>"/>
+
+!! Multiple Selections
+
+This example uses the `multiple` keyword to specify that we should be able to select multiple items.
+
+<$macrocall $name="wikitext-example-without-html" src="<$select tiddler='$:/generated-list-demo-state' field='testing' multiple>
+<$list filter='[tag[TableOfContents]]'>
+<option><$view field='title'/></option>
+</$list>
+</$select><br />
+<$list filter='[list[$:/generated-list-demo-state!!testing]]'>
+<$view field='title' /><br />
+</$list>
+"/>