Получение значений из HTMLCollection в строку

Я пытаюсь захватить выбранные значения раскрывающегося списка с множественным выбором и преобразовать их в одну строку для последующей манипуляции. На данный момент у меня есть следующий код:

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>

Окно оповещения в настоящее время выводит следующее:

[объект HTMLOptionElement, объект HTMLOptionElement, ...]

где "..." представляет любые дальнейшие гипотетические варианты.

Что мне нужно для вывода "жанров", например "Action, Romance, Thriller".

Заранее благодарю за любую помощь.

Источник

4 ответа

Решение

Когда ты join массив, он вызывает "toString" каждого элемента. В этом случае они являются элементами DOM и возвращают свой тип. Ты можешь использовать map сначала создать новый массив строк, содержащий value каждого варианта:

http://jsfiddle.net/Lfx6r5sm/

var genres = arr.map(function(el){
    return el.value;
}).join(', ');
Источник

Вы можете перебирать выбранные элементы следующим образом:

<script type="text/javascript">
function newComic(){
    var elem = document.querySelector("#genreList").selectedOptions;
    var arr = [];
    for(var x=0; x<elem.length; x++){
        // for the TEXT value
        //arr.push(elem[x].text);

        // for the value
        arr.push(elem[x].value);
    }
    var genres = arr.join(', ');
    window.alert(genres);
}
</script>
Источник

Вам нужно перебрать HTMLCollection следующим образом

<script>
    function newComic()
    {
       var elem = document.querySelector("#genreList").selectedOptions;
       console.log(elem);
       for (var i = 0; i < elem.length; i++) {
           console.log(elem[i].attributes[0].nodeValue); //second console output
       }
    }
</script>
Источник

Я думаю, что jquery лучше всего подходит для этой задачи.

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><input type="button" value="Add Comic" id="btnAddComic" style="font-size: 10pt; width: 150px; height:40px;"></p>

JQuery

$("#btnAddComic").click(function(){
    var inz = $( "#genreList option:selected" ).map(function(){
        return $(this).text();
    }).get().join(',');
    alert(inz);
});

ПОСМОТРЕТЬ СКРИПКУ

http://jsfiddle.net/inzamamtahir/1bm45gu7/2/

Источник
Другие вопросы по тегам