3

我正在尝试获取多选下拉列表的选定值并将它们转换为单个字符串以供以后操作。目前我有以下代码：

    function newComic()
			{
				var elem = document.querySelector("#genreList").selectedOptions;
				var arr = [].slice.call(elem);
				var genres = arr.join(', ');
				window.alert(genres);
    }
 <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>

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

[对象 HTMLOptionElement, 对象 HTMLOptionElement, ...]

其中“...”代表任何进一步的假设选项。

我需要将“流派”输出为例如“动作、浪漫、惊悚”。

提前感谢您的帮助。

4

4 回答 4

8

当您join使用数组时，它正在调用每个元素的“toString”。在这种情况下，它们是 DOM 元素并返回它们的类型。您可以使用mapfirst 创建一个包含value每个选项的新字符串数组：

http://jsfiddle.net/Lfx6r5sm/

var genres = arr.map(function(el){
    return el.value;
}).join(', ');
于 2015-03-17T19:15:03.427 回答
1

您可以像这样遍历选定的项目：

<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>
于 2015-03-17T19:16:55.113 回答
0

您需要像这样遍历 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>
于 2015-03-17T19:17:07.987 回答
-1

我认为 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/

于 2015-03-17T19:21:27.637 回答