drewbo/Select-Multiple.markdown

## index.html
<body>
  <select multiple size=5 id="menu"></select>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>

## script.js
var dataset = [1,2,3,4,5,6,7,8,9,10];
var curSelection = [];

var menu = d3.select("select")
             .on("change",change);

          menu.selectAll("option")
              .data(dataset)
              .enter()
              .append("option")
              .text( function (d){return d});

var svg = d3.select("body").append("svg")
            .attr("width",400)
            .attr("height",400);

function change(){
   curSelection = [];
   d3.selectAll("option").each(sel);

  svg.selectAll("text")
     .data(curSelection, function key (d){ return d; })
     .enter()
     .append("text")
     .attr("x",50)
     .attr("y", function (d,i) { return i*25 + 50;})
     .text(function (d){return d;});

  svg.selectAll("text")
     .data(curSelection, function key (d){ return d; })
     .exit()
     .remove();
};

function sel (d,i) {

  if (d3.select(this).property("selected") == true){
    curSelection.push( d3.select(this).property("value"));}
}

## Select-Multiple.markdown

      
    Raw
  

              Select-Multiple.markdown
            
          
    Select Multiple

 experimenting with multiple selections 

A Pen by Drew on CodePen.
License.

  
## style.css
body {
  background-color: lightgray;
}
	<body>
	<select multiple size=5 id="menu"></select>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</body>
	var dataset = [1,2,3,4,5,6,7,8,9,10];
	var curSelection = [];

	var menu = d3.select("select")
	.on("change",change);

	menu.selectAll("option")
	.data(dataset)
	.enter()
	.append("option")
	.text( function (d){return d});

	var svg = d3.select("body").append("svg")
	.attr("width",400)
	.attr("height",400);

	function change(){
	curSelection = [];
	d3.selectAll("option").each(sel);

	svg.selectAll("text")
	.data(curSelection, function key (d){ return d; })
	.enter()
	.append("text")
	.attr("x",50)
	.attr("y", function (d,i) { return i*25 + 50;})
	.text(function (d){return d;});

	svg.selectAll("text")
	.data(curSelection, function key (d){ return d; })
	.exit()
	.remove();
	};

	function sel (d,i) {

	if (d3.select(this).property("selected") == true){
	curSelection.push( d3.select(this).property("value"));}
	}