using HTML in labels

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.0.7/jsPlumb.min.js"></script>
<!-- this is an example of how to make a dropdown an overlay -->

<div class="d" id="d1">1</div>
<div class="d" id="d2">2<select><option value='red'>red</option><option value='blue'>blue</option></select></div>

CSS

.d { 
    position:absolute; 
    width:2em; 
    height:2em; 
    border:1px solid black; 
    z-index:1;
}

._jsPlumb_connector { z-index:0; }
._jsPlumb_endpoint { z-index:2; } /* endpoint sits above nodes and connectors */

#d1 { top:50px;left:50px; }
#d2 { top:50px;left:240px; }

.aLabel {
    background-color:white; 
    z-index:10;
    border:1px solid red;
    font-size:20px;
    padding:1em;
    cursor:pointer;
    text-align:center;
    box-shadow:0px 0px 3px 3px #567;
    border-radius:3px;
    -moz-border-radius:3px;
}

.strong {
    font-weight:bold;
}
.red {
    color:red;
}

JavaScript

jsPlumb.ready(function() {
    
    jsPlumb.draggable($(".d"));
    
    var select = $("<select><option value='red'>red</option><option value='blue'>blue</option></select>");
    select.bind("change", function() {
        conn.setPaintStyle({
            strokeStyle:$(this).val(),
            lineWidth:3
        });
    });
        
    
    var conn = jsPlumb.connect({
        source:"d1",
        target:"d2",
        paintStyle:{
            strokeStyle:"red",
            lineWidth:3
        },
        overlays:[
            ["Custom", {
                create:function() {
                    return select;                
                }
            }]
        ]
    });                          
});