将数组写入< select>标签 [英] Writing Arrays To <select> Tag
问题描述
大家好。
我正在学习Javascript并做一些练习。
我正在工作的一个问题on使用
Ajax从xml文件中获取一组名称，并将其写入< select< optionstags。
这是他们使用的代码：
函数writeSelect（name_group）{
var this_option;
var my_select = document.getElementById（" namelist"）;
for（var loop = 0; loop< name_group.length; loop ++）
{
this_option = new Option（）;
this_option.value = the_array [loop];
this_option.text = the_array [loop]
my_select.options [loop] = this_option;
}
}
writeSelect（）函数的参数包含名称数组和
id "名称列表"是表单元素中select标签的id。
这是我第一次看到新的Option（）函数。这是将数组写入< selecttag的标准
吗？或者这可以用另一种方式完成另外的
方式 - 如果是这样的话呢？
任何回复都会受到赞赏。
-
通过网站管理员网站发布的消息
http://www.webmasterkb.com/Uwe/Forum...cript/200806/1
Hello everyone.
I''m currently learning Javascript and doing a few exercises.
One problem I''m working on takes an array of names from an xml file using
Ajax and writes it to <select<optionstags.
This is the code they use:
function writeSelect(name_group) {
var this_option;
var my_select = document.getElementById("namelist");
for (var loop = 0; loop < name_group.length; loop++)
{
this_option = new Option();
this_option.value = the_array[loop];
this_option.text = the_array[loop]
my_select.options[loop] = this_option;
}
}
The parameter for writeSelect() function contains the array of names and the
id "namelist" is the id for the select tag in the form element.
This is my first time seeing the new Option() function. Is this the standard
for writing arrays to the <selecttag? Or could this have been done another
way - if so what this that way?
Any response would be appreciated.
--
Message posted via WebmasterKB.com
http://www.webmasterkb.com/Uwe/Forum...cript/200806/1
推荐答案
LayneMitch写道：
LayneMitch wrote:
我正在处理的一个问题是使用
Ajax并将其写入< select< optionstags。
这是他们使用的代码：
函数writeSelect（name_group）{
* * var this_option;
* * var my_select = document.getElementById（" namelist"）;
* * for（var loop = 0; loop< name_group.length; loop ++）
* * * {
* * * * this_option = new Option（）;
* * * * thi s_option.value = the_array [loop];
* * * * this_option.text = the_array [loop]
* * * * my_select.options [loop] = this_option;
* * *}
}
writeSelect（）函数的参数包含名称数组和
id" namelist"是表单元素中select标签的id。
这是我第一次看到新的Option（）函数。这是将数组写入< selecttag的标准
吗？或者这可以用另一种方式完成另一种方式 - 如果是这样的话那么这样呢？
One problem I''m working on takes an array of names from an xml file using
Ajax and writes it to <select<optionstags.
This is the code they use:
function writeSelect(name_group) {
* *var this_option;
* *var my_select = document.getElementById("namelist");
* *for (var loop = 0; loop < name_group.length; loop++)
* * * {
* * * * this_option = new Option();
* * * * this_option.value = the_array[loop];
* * * * this_option.text = the_array[loop]
* * * * my_select.options[loop] = this_option;
* * * }
}
The parameter for writeSelect() function contains the array of names and the
id "namelist" is the id for the select tag in the form element.
This is my first time seeing the new Option() function. Is this the standard
for writing arrays to the <selecttag? Or could this have been done another
way - if so what this that way?
我担心你的功能有很多缺点。
- 可以通过以下方式获得更好的向后兼容性使用
''document.forms [0] .elements [" namelist"]''代替
''document.getElementById（" namelist"）' '。
- 我猜测你的''the_array''应该读''name_group''
- 看来你想要完整填充列表，因为你从零开始循环
。但是，如果您的第一个列表比新的
更大，则仍会显示第一个列表的最后一个条目。最好先清空列表然后分配新的列表。
- 在循环中，你使用四行代码来完成通常的工作。 />
一条指令。
所有在一起：
<！DOCTYPE html PUBLIC" - // W3C / / DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
< html>
< head>
< script type =" text / javascript">
var arr = [''John''，''Paul''，''Fred''，''Mary''];
函数writeSelect（name_group）{
var my_select = document.forms [0] .elements [''namelist''];
//清空列表
while（my_select.options.length）my_select.options [ 0] = null;
//用新值填充列表
for（var i = 0; i< name_group.length; ++ i）
my_select.options [my_select.length]
=新选项（name_ group [i]，name_group [i]）;
}
< / script>
< title>我的网页< / title>
< / head>
< body>
< form method =" get" action ="＃">
< p>
< select size =" 1" name =" namelist">
< option value =" - "> - < / option>
< / select>
< input type =" button"值= QUOT;按一下[ onClick =" writeSelect（arr）;">
< / p>
< / form>
< /正文>
< / html>
有关''选项''的信息 - 对象：
http://www.javascriptkit.com/jsref/s...shtml#section2
希望这会有所帮助，
-
巴特
I''m afraid your function has a number of shortcomings.
- A better backwards compatibility can be obtained by using
''document.forms[0].elements["namelist"]'' in stead of
''document.getElementById("namelist")''.
- I surmise that your ''the_array'' should read ''name_group''
- It appears you want to do a full refill of the list, since you start
looping from zero. But if your first list would be bigger than the new
one, the last entries of the first list will still be shown. It would
be better to empty the list first and then assign the new ones.
- Inside the loop, you use four lines of code for what is usually done
in one instruction.
All together:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<script type="text/javascript">
var arr = [''John'', ''Paul'', ''Fred'', ''Mary''];
function writeSelect(name_group) {
var my_select = document.forms[0].elements[''namelist''];
// empty the list
while (my_select.options.length) my_select.options[0] = null;
// populate list with the new values
for (var i=0; i<name_group.length; ++i)
my_select.options[my_select.length]
= new Option(name_group[i], name_group[i]);
}
</script>
<title>My web page</title>
</head>
<body>
<form method="get" action="#">
<p>
<select size="1" name="namelist">
<option value="-">-</option>
</select>
<input type="button" value="Click" onClick="writeSelect(arr);">
</p>
</form>
</body>
</html>
Info about the ''Option''-object:
http://www.javascriptkit.com/jsref/s...shtml#section2
Hope this helps,
--
Bart
2008年6月21日星期六05:26:33 -0700（PDT），/ Bart Van der Donck /：
Sat, 21 Jun 2008 05:26:33 -0700 (PDT), /Bart Van der Donck/:
关于''选项''的信息-object：
http://www.javascriptkit.com /jsref/s...shtml#section2
我一直想知道选项的标准（官方与否）
宾语？我的意思是使用
Document.createElement（" option"）和
的add（）/ remove（）方法不是更好的HTMLSelectElement [1 ]，或者可能只是Node.appendChild（）/
Node.removeChild（）？我没有在Gecko DOM Reference中找到对Option对象
的引用。 [2]和MSDN Library [3] - 我有没有
错过了它们？
[1] http://www.w3.org/TR/DOM-Level-2 -HTM ... ml＃ID-94282980
[2] http://developer.mozilla.org/en/docs..._DOM_Reference
[3] http://msdn.microsoft.com/library
-
Stanimir
I''ve always wondered how standard (official or not) is the Option
object? I mean isn''t it better to use
Document.createElement("option") and the add() / remove() methods of
the HTMLSelectElement [1], or probably just Node.appendChild() /
Node.removeChild()? I''ve not found references to the Option object
in the "Gecko DOM Reference" [2] and the MSDN Library [3] - have I
missed them?
[1] http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-94282980
[2] http://developer.mozilla.org/en/docs..._DOM_Reference
[3] http://msdn.microsoft.com/library
--
Stanimir
Stanimir Stamenkov写道：
Stanimir Stamenkov wrote:
Sat，2008年6月21日05:26:33 -0700（PDT），/ Bart Van der Donck /：
Sat, 21 Jun 2008 05:26:33 -0700 (PDT), /Bart Van der Donck/:
>关于''选项''的信息 - 对象：
http://www.javascriptkit.com/jsref/s...shtml#sec第2步
我一直想知道选项
对象的标准（官方与否）是多少？
I''ve always wondered how standard (official or not) is the Option
object?
Option-object是最老的之一，并且在第一个j（ava）脚本版本中已经支持
。 />
The Option-object is one of the eldest around and was already
supported in the first j(ava)script versions.
我的意思是使用Document.createElement（" option"）
和add（）/ remove（）不是更好HTMLSelectElement [1]的方法，
或者可能只是Node.appendChild（）/ Node.removeChild（）？ *
I mean isn''t it better to use Document.createElement("option")
and the add() / remove() methods of the HTMLSelectElement [1],
or probably just Node.appendChild() / Node.removeChild()? *
这属于一种更新的编码风格，旨在提倡更为通用的语法
。好处是它适用于页面的整个
DOM，因此在程序员的技术上更容易。另一方面，另一方面，有些人可能更喜欢更经典的方法：
更长久的历史记录，更好的浏览器支持，程序员更多
自信在他的旧语法中，...
This belongs to a more recent coding style, which aims to advocate a
more general syntax. The benefit is that it''s intended for the whole
DOM of the page, and thus technically easier for the programmer. On
the other hand, some could prefer a more classical approach too:
longer proven history, better browser support, programmer is more
confident in his old syntax, ...
我没有在Gecko DOM
参考中找到对Option对象的引用; [2]和MSDN Library [3] - 我错过了吗？
I''ve not found references to the Option object in the "Gecko DOM
Reference" [2] and the MSDN Library [3] - have I missed them?
是的。
-
巴特
Yes.
--
Bart
这篇关于将数组写入< select>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
