Change value of a select that it´s not available in the list

I have this problem:

HTML:

select class="form-control" id="responsible" name="responsible">
            <option selected="<%= vul.responsible %>"> <%= vul.responsible %></option>
            <option value = "Person1">Person1</option>
            <option value = "Person2">Person2</option>
            <option value = "Person3">Person3</option>
            <option value = "Person4">Person4</option>
            <option value = "Person5">Person5</option>
            <option value = "Person6">Person6</option>
            <option value = "Person7">Person7</option>
          </select>

And now i need that if some people wants to edit one register click on the select and just pick his name. But... i need that in the backend persist like a list of responsibles, no just one.

So i just did this:

$(document).ready(function(){
var latestResponsible = $("#responsible").val()

$('#editForm').submit(function() {
    if ($("#responsible").val() != latestWebSecResponsible) {
    textToAppend = latestWebSecResponsible + ',' +$("#responsible").val();
    $("#responsible").val(textToAppend).change();
    console.log($("#WebSecResponsible").val())
    }
});

});

And this prints null.

I research a little and saw that i can`t append a value that is not in the list.

For example: The select has the posible values "Xman","Yman"and "Zman" And then i want to change the value of the select like this "Xman-Yman".

Some idea? Thanks !!

via NReverse