D3 Examples - selectize example minimal

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.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" />
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    
​
var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 200)
​
    svg.append("text")
      .text("Edit the code below to change me!")
      .attr("y", 200)
      .attr("x", 0)
      .attr("font-size", 10)
      .attr("font-family", "monospace")
​
// function displayVals() {
// var  singleValues = $( "#select-name" ).val();
// var multipleValues = $( "#select-name" ).val() || [];
​
// $( "p" ).html( "<b>Single:</b> " + singleValues +
//                          " <b>Multiple:</b> " + multipleValues.join( ", " ) );
// }
​
    
 // var select =  $( "select" ).change( displayVals );
​
// displayVals();
​
// $('select').selectize({
//   onInitialize: function (selectize) {
//     selectize.on('change', function (value) {
//       var item = this.$input[0];
//       var selected_text = $(item.selectize.getItem(value)[0]).text();
//     });
//   }
//  })
​
$(function() {    
​
  $('#select-name').selectize({
    delimiter: ',',
    persist: false,
    plugins: ['remove_button'],
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });
​
});
​
var bla = $('#select-name').val();    
    
//var select = $(function() {
//$('#select-name').selectize({    
//plugins: ['remove_button']
​
// });
  
// alert($(this).find(':selected').data('value'));
//});
​
​
​
 </script>
​
<select id="select-name" placeholder="Select a person..." multiple>
<option value="">Type a name...</option>
<option value="4">Thomas Edison</option>
<option value="1">John Doe</option>
<option value="19">John Donut</option>
<option value="21">Dante Joe</option>
<option value="22">Jo Dod</option>
<option value="1">Nikola</option>
<option value="3">Nikola Tesla</option>
<option value="5">Arnold Schwarzenegger</option>
</select>
  
</body>
​
​
​
​
​
​
    