<script src="https://gojs.net/latest/release/go.js"></script>
<body>

  <div id="myDiagram" style="border: solid 3px red; width:300px; height:300px"></div>
    
</body>
var customEditor = document.createElement("select");

customEditor.onActivate = function () {
    customEditor.value = customEditor.textEditingTool.textBlock.text;

    // Do a few different things when a user presses a key
    customEditor.addEventListener("keydown", function (e) {
        var keynum = e.which;
        var tool = customEditor.textEditingTool;
        if (tool === null) return;
        if (keynum == 13) { // Accept on Enter
            tool.acceptText(go.TextEditingTool.Enter);
            return;
        } else if (keynum == 9) { // Accept on Tab
            tool.acceptText(go.TextEditingTool.Tab);
            e.preventDefault();
            return false;
        } else if (keynum === 27) { // Cancel on Esc
            tool.doCancel();
            if (tool.diagram) tool.diagram.focus();
        }
    }, false);

    var loc = customEditor.textEditingTool.textBlock.getDocumentPoint(go.Spot.TopLeft);
    var pos = customEditor.textEditingTool.diagram.transformDocToView(loc);
    customEditor.style.left = pos.x + "px";
    customEditor.style.top = pos.y + "px";
}

function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagram",  // create a Diagram for the DIV HTML element
                  {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true  // enable undo & redo
                  });
  myDiagram.toolManager.textEditingTool.defaultTextEditor = customEditor;
    myDiagram.toolManager.textEditingTool.starting = go.TextEditingTool.SingleClick;

     var op;
    op = document.createElement("option");
    op.text = "One";
    op.value = "1";
    customEditor.add(op, null);
  op = document.createElement("option");
    op.text = "Two";
    op.value = "2";
    customEditor.add(op, null);

  customEditor.addEventListener('change', function (e) {
        var textblock = myDiagram.toolManager.textEditingTool.textBlock;
        var node = textblock.part;
        var data = node.data;
        alert(data.text);
    }, false);

    // define a simple Node template
    myDiagram.nodeTemplate =
      $(go.Node, "Auto",  // the Shape will go around the TextBlock
        $(go.Shape, "RoundedRectangle",
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3, editable: true },  // some room around the text
          new go.Binding("text"))
      );

    // but use the default Link template, by not setting Diagram.linkTemplate

    // create the model data that will be represented by Nodes and Links
    myDiagram.model = new go.GraphLinksModel(
    [
      { text: "Alpha", color: "lightblue" },
      { text: "Beta", color: "orange" },
      { text: "Gamma", color: "lightgreen" },
      { text: "Delta", color: "pink" }
    ],
    [
    ]);
  }

init();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.