javascript 从 HTMLCollection 获取值到字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29107655/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting values from an HTMLCollection to a string
提问by alex494
I am attempting to grab the selected values of a multi-select dropdown and convert them into a single string for later manipulation. At the moment I have the following code:
我试图获取多选下拉列表的选定值并将它们转换为单个字符串以供以后操作。目前我有以下代码：
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>
The alert window is currently outputting the following:
警报窗口当前输出以下内容：
[object HTMLOptionElement, object HTMLOptionElement, ...]
[对象 HTMLOptionElement, 对象 HTMLOptionElement, ...]
where '...' represents any further hypothetical options.
其中“...”代表任何进一步的假设选项。
What I need is for 'genres' to output as, for example, 'Action, Romance, Thriller' instead.
我需要的是将“流派”输出为例如“动作、浪漫、惊悚”。
Thanks in advance for any help.
在此先感谢您的帮助。
回答by James Montagne
When you jointhe array, it is calling the "toString" of each element. In this case, they are DOM elements and return their type. You can use mapfirst to create a new array of strings containing the valueof each option:
当您join使用数组时，它正在调用每个元素的“toString”。在这种情况下，它们是 DOM 元素并返回它们的类型。您可以使用mapfirst 创建一个包含value每个选项的新字符串数组：
var genres = arr.map(function(el){
return el.value;
}).join(', ');
回答by Samuel Cook
You could iterate through the selected items like so:
您可以像这样遍历所选项目：
<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>
回答by meteor
You need to iterate through HTMLCollection like this
你需要像这样遍历 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>
回答by Inzamam Tahir
I think jquery is best suited for this task.
我认为 jquery 最适合这项任务。
HTML
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
jQuery
$("#btnAddComic").click(function(){
var inz = $( "#genreList option:selected" ).map(function(){
return $(this).text();
}).get().join(',');
alert(inz);
});
