D3 Examples - selectize with svg

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>val demo</title>
​
<style>
​
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}
​
</style>
​
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.min.js></script>  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.bootstrap2.min.css" />
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
 
​
   
<script>
  
// drop down selectize menu
  
var data = ["Cat", "Dog", "Turtle"];
​
d3.select('body')
    .append('p')
    .attr("id", "info")  
  
var select = d3.select('body')
  .append('select')
  .attr('class','select')
  .attr('id','select')  
  .attr('multiple','multiple') 
  .on('change',onchange)
  
var options = select
  .selectAll('option')
    .data(data).enter()
    .append('option')
    .text(function (d) { return d; });
​
  
  
function onchange() {
    var multipleValues = $( "#select" ).val() || [];
  
   d3.select('p')
    .attr("id", "info")
        .text('current value: ' + multipleValues)
    };
  
// selectize input  
​
$(function() {    
​
  $('#select').selectize({
    delimiter: ',',
    persist: false,
    plugins: ['remove_button'],
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });
​
});
  
// Start line chart
  
  
  
  
// function displayVals() {
// var multipleValues = $( "#select" ).val() || [];
​
// $( "p" ).html( "Multiple: " + multipleValues.join( ", " ) );
​
// console.log(multipleValues);
// }
  
// $( "select" ).change( displayVals );
// displayVals();
  
  
  
</script>
 
</body>
</html>
    