从HTMLCollection获取值到字符串

Question

我试图获取多选下拉列表的选定值并将它们转换为单个字符串以供稍后操作.目前我有以下代码:

HTML:

            <select id="genreList" multiple="multiple" name="addGenre[]"  style="width: 150px;font-size: 10pt;">
                <option value="Action">Action</option>
                <option value="Comedy">Comedy</option>
                <option value="Fantasy">Fantasy</option>
                <option value="Horror">Horror</option>
                <option value="Mystery">Mystery</option>
                <option value="Non-Fiction">Non-Fiction</option>
                <option value="Period">Period</option>
                <option value="Romance">Romance</option>
                <option value="Sci-Fi">Sci-Fi</option>
                <option value="Thriller">Thriller</option>
            </select></p>

            <p><input type="button" onclick="newComic()" value="Add Comic" id="btnAddComic" style="font-size: 10pt; width: 150px; height:40px;"></p>

JavaScript的:

<script>
function newComic()
        {
            var elem = document.querySelector("#genreList").selectedOptions;
            var arr = [].slice.call(elem);
            var genres = arr.join(', ');
            window.alert(genres);
}
</script>

警报窗口当前正在输出以下内容:

[object HTMLOptionElement,object HTMLOptionElement,...]

其中'...'代表任何进一步的假设选项.

我需要的是"类型"输出,例如,"动作,浪漫,惊悚".

在此先感谢您的帮助.

Answer 1

当您join使用数组时,它会调用每个元素的"toString".在这种情况下,它们是DOM元素并返回其类型.您可以map先使用创建包含value每个选项的新字符串数组:

http://jsfiddle.net/Lfx6r5sm/

var genres = arr.map(function(el){
    return el.value;
}).join(', ');