从 HTMLCollection 获取值到字符串
Getting values from an HTMLCollection to a string
我正在尝试获取多 select 下拉列表的 selected 值并将它们转换为单个字符串以供以后操作。目前我有以下代码:
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>
警报 window 当前正在输出以下内容:
[对象 HTMLOptionElement,对象 HTMLOptionElement,...]
其中“...”表示任何进一步的假设选项。
我需要的是 'genres' 输出,例如 'Action, Romance, Thriller'。
在此先感谢您的帮助。
当您 join
数组时,它正在调用每个元素的 "toString"。在这种情况下,它们是 DOM 元素和 return 它们的类型。您可以先使用 map
创建一个包含每个选项的 value
的新字符串数组:
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);
});
查看 FIDDLE
我正在尝试获取多 select 下拉列表的 selected 值并将它们转换为单个字符串以供以后操作。目前我有以下代码:
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>
警报 window 当前正在输出以下内容:
[对象 HTMLOptionElement,对象 HTMLOptionElement,...]
其中“...”表示任何进一步的假设选项。
我需要的是 'genres' 输出,例如 'Action, Romance, Thriller'。
在此先感谢您的帮助。
当您 join
数组时,它正在调用每个元素的 "toString"。在这种情况下,它们是 DOM 元素和 return 它们的类型。您可以先使用 map
创建一个包含每个选项的 value
的新字符串数组:
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);
});