下拉菜单更改与所选内容兼容的内容

Question

我发现了一个很棒的脚本，可以在下拉菜单中向不同的菜单项显示不同的内容：

<style>
.inv {
display: none;
}
</style>

    <select id="target">
        <option value="">Select...</option>
        <option value="content_1">Option 1</option>
        <option value="content_2">Option 2</option>
        <option value="content_3">Option 3</option>
    <select>

    <div id="content_1" class="inv">Content 1</div>
    <div id="content_2" class="inv">Content 2</div>
    <div id="content_3" class="inv">Content 3</div>

    <script>
        document
            .getElementById('target')
            .addEventListener('change', function () {
                'use strict';
                var vis = document.querySelector('.vis'),   
                    target = document.getElementById(this.value);
                if (vis !== null) {
                    vis.className = 'inv';
                }
                if (target !== null ) {
                    target.className = 'vis';
                }
        });
    </script>

但是现在我想通过使用select-select：https://harvesthq.github.io/chosen/

使下拉菜单更加精美

现在什么都不起作用了，请问有人知道如何使两个脚本兼容吗？