Edit in JSFiddle

var connection = $.hubConnection("http://signalrfiddle.cloudapp.net");

var groupName = "";
var group = connection.createHubProxy("group");

group.on("Receive", function (name, text) {
    $("#list").append("<li>" + name + ":" + text + "</li>");
});

$("#send").click(function () {
    group.invoke("Send", groupName, $("#message").val());
    
    $("#message").val("");
});

$("#group").change(function () {
    var newGroupName = $(this).val();
    
    if (newGroupName != groupName) {
        group.invoke("Leave", groupName).done(function () {
            group.invoke("Enter", newGroupName);
            
            groupName = newGroupName;
        });
    }
});

connection.start(function () {
    groupName = $("#group").val();
    
    group.invoke("Enter", groupName);
});
<select id="group">
    <option value="group1">group 1</option>
    <option value="group2">group 2</option>
</select>

<input type="text" id="message" />
<input type="button" id="send" value="send" />

<ul id="list"></ul>

              

External resources loaded into this fiddle: