在下拉菜单中交换值，其中两个下拉列表包含相同的值

Question

我正在尝试重新创建在特定网站上找到的功能，其中用户可以单击按钮来交换起始位置和结束位置，以便开始位置下拉值中的条目与结束位置下拉值交换。

最初这似乎很简单（更改选择的值），但如果两个下拉列表包含相同的值，我将如何使用相应的匹配项指向/更新每个下拉列表，而不是通过交换复制任何下拉列表条目周围的文字？

到目前为止，这是我的代码：

<div class="row">
    <div class="col-md-3">
        <select class="form-control">
            <option disabled="" selected="">Start</option>
            <option>Lab</option>
            <option>Hall</option>
            <option>Apartments</option>
            <option>Church</option>
            <option>Park</option>
            <option>College</option>
        </select>
    </div>
    <div class="col-md-1">
        <button>Swap</button><br/><br/>
    </div>
    <div class="col-md-3">
        <select class="form-control">
            <option disabled="" selected="">End</option>
            <option>Lab</option>
            <option>Hall</option>
            <option>Apartments</option>
            <option>Church</option>
            <option>Park</option>
            <option>College</option>
        </select>
    </div>
</div>

Jsfiddle：http://jsfiddle.net/e0x1jc43/1/