动态添加OPTION标签 [英] Adding OPTION tags dynamically
问题描述
任何人都可以给我一个快速的代码片段（基于标准），用于动态地向SELECT添加
OPTION标签。我在IE浏览器中没有任何问题，但是对于整个标准世界来说，这是一个新的东西，并且无法弄清楚如何制作
它的工作原理，例如，Firefox。现在我正在使用的代码是
如下：
newOpt = document.createElement（''OPTION''）;
newOpt.id =''optKeyword'';
newOpt.label =''关键字'';
document.getElementById（''slctCategory''）。add （newOpt）;
这段代码在IE或Firefox中不起作用，因为根据HTML 4.01中定义的标准，它们都不能运行
label属性
如果设置了
作为选项内容。如果我将
设置label属性更改为设置text属性，则可以在IE中使用，但
不在Firefox中。根据HTML 4.01，text属性应该是只读的b $ b，因此我希望这就是它在Firefox中不起作用的原因。
无论如何，对此有一些帮助将不胜感激！
David
在回复我以前的帖子时，我发现我可以在Firefox中设置文本
属性并且它可以工作（虽然我仍然记得读取它/ b $ b它应该是一个只读属性）。无论如何，现在我的问题是
以下行：
document.getElementById（''slctCategory''）。add（newOpt）;
如果我在IE中使用这一行，它运行正常，但它不会像这样在
Firefox中工作，因为它期望最终的参数，所以如果我这样说是有效的：
document.getElementById（''slctCategory''）。add（newOpt，null）;
我不知道为什么它应该期待最后的论证，特别是当它必须为空时，
，但Firefox不会添加新选项
否则。无论如何，我显然可以使用我的全球isIE。变量使这里的代码分支成为
，但这是我试图避免的。是否有一个不同的方式来解决这个问题，这会更好吗？
" David" < DK **** @ hotmail.com>在消息中写道
新闻：h8 ******************** @ comcast.com ...可以任何人都给我一个快速的代码片段（基于标准），以便动态地将OPTION标签添加到SELECT。我在IE浏览器中没有问题，但我对整个标准世界都是新手，并且无法弄清楚如何让它在Firefox中运行。现在我使用的代码如下：
newOpt = document.createElement（''OPTION''）;
newOpt.id =''optKeyword'';
newOpt.label =''关键字'';
document.getElementById（''slctCategory''）。add（newOpt）;
这段代码不能用IE或Firefox，因为它们都没有按照HTML 4.01中定义的标准运行，其中标签属性
应该用作选项内容（如果已设置）。如果我将
设置label属性更改为设置text属性，则可以在IE中使用，但不能在Firefox中使用。根据HTML 4.01，text属性被认为是只读的，因此我希望这就是它在Firefox中不起作用的原因。无论如何，对此的一些帮助将不胜感激！
David
David写道：In回应我以前的帖子，我发现我也可以在Firefox中设置文本属性，并且它可以工作（虽然我还记得读到它应该是一个只读属性）。无论如何，现在我的问题是
以下行：
document.getElementById（''slctCategory''）。add（newOpt）;
如果我用这个在IE浏览器中，它运行良好，但它在Firefox中不会像这样工作，因为它需要最终的参数，所以如果我这样说就可以了：
文档.getElementById（''slctCategory''）。add（newOpt，null）;
我不知道为什么它应该期待最后的论证，
特别是当它必须为null时，但Firefox不会添加新选项
。无论如何，我显然可以使用我的全球isIE。变量使这里的代码分支，但这是我试图避免的。有没有不同的方式来解决这个问题呢？
" David" < DK **** @ hotmail.com>在消息中写道
新闻：h8 ******************** @ comcast.com ...
可以任何人都给我一个快速的代码片段（基于标准），以便动态地将OPTION标签添加到SELECT。我在IE浏览器中没有问题，但我对整个标准世界都是新手，并且无法弄清楚如何让它在Firefox中运行。现在我使用的代码如下：
newOpt = document.createElement（''OPTION''）;
newOpt.id =''optKeyword'';
如果您要添加多个选项，请确保ID是唯一的。
newOpt.label =''关键字'';
选项元素没有''label''属性。标签元素可以
包含表单控件，但是一个选项元素不是表单控件，它是一个select（它是一个表单控件）的子元素。至少那是我的
读取规范。
document.getElementById（''slctCategory''）。add（newOpt）;
以下内容适用：
var txt =''关键字'';
var val =' '有些价值';
var newOpt = new Option（txt，val，false，true）;
myList.options [myList.options.length] = newOpt;
''txt''是选项文本，''val''选项值和''false''修改
选项''选中的属性（true会选中该选项）。
前两个参数是必需的，其余参数通常可以省略
但是这可能是一个很好的做法他们。
我不确定它是100％''DOM兼容''，但真正的考验是它是否b / b
可靠地工作在绝大多数浏览器中没有过多的b
副作用 - 我认为它符合t软管标准。
这里有一个主题可能会有所帮助：
< URL：http：//groups-beta.google。 COM /组/ comp.lang.javascript / browse_frm /线程/ af6e808b089f60f8 / 0a5222cd15fc5e11 q =添加+选项+选择+滴+向下+ IE&安培？; rnum = 3& hl = en＃0a5222cd15fc5e11>
[...]
-
Rob
RobG写道：
[...]
以下内容适用：
var txt =''关键字'';
var val =''某些值'';
var newOpt = new选项（txt，val，false，true）;
myList。 options [myList.options.length] = newOpt;
''txt''是选项文本，''val''选项值和''false''修改
选项'的选择属性（true会选择该选项）。
前两个参数是必需的，其余参数通常可以省略
但是包含它们可能是个好习惯。
忘了添加最后一个参数（上面设置为'true）设置是否
该选项是当前选择的选项。 />
-
Rob
Can anyone give me a quick code snippet (that is standards-based) for adding
OPTION tags to a SELECT dynamically. I have no problem doing it in IE but I
am kind of new to the whole standards world and can''t figure out how to make
it work in, for instance, Firefox. Right now the code I am using is as
follows:
newOpt=document.createElement(''OPTION'');
newOpt.id=''optKeyword'';
newOpt.label=''Keyword'';
document.getElementById(''slctCategory'').add(newOpt );
This code won''t work in IE OR Firefox since neither of them operate
according to the standard defined in HTML 4.01 where the label property
should be used as the option contents if it is set. If I change it from
setting the label property to setting the text property, it works in IE, but
not in Firefox. According to HTML 4.01 the text property is supposed to be
read only, thus I would expect that''s the reason it doesn''t work in Firefox.
Anyways, some help on this would be appreciated!
David
In response to my previous post, I have discovered that I CAN set the text
property in Firefox as well and it works (though I still recall reading that
it is supposed to be a readonly property). Anyways, now my problem is the
following line:
document.getElementById(''slctCategory'').add(newOpt );
If I use this line in IE, it works fine, but it won''t work like this in
Firefox, as it expects a final argument, so if I put it like this it works:
document.getElementById(''slctCategory'').add(newOpt ,null);
I have NO idea why on earth it should expect that final argument,
particularly when it has to be null, but Firefox will not add the new option
otherwise. Anyways, I could obviously use my global "isIE" variable to make
the code branch here but that is something I am trying to avoid. Is there a
different way of going about this all which would be better?
"David" <dk****@hotmail.com> wrote in message
news:h8********************@comcast.com...Can anyone give me a quick code snippet (that is standards-based) for
adding OPTION tags to a SELECT dynamically. I have no problem doing it in
IE but I am kind of new to the whole standards world and can''t figure out
how to make it work in, for instance, Firefox. Right now the code I am
using is as follows:
newOpt=document.createElement(''OPTION'');
newOpt.id=''optKeyword'';
newOpt.label=''Keyword'';
document.getElementById(''slctCategory'').add(newOpt );
This code won''t work in IE OR Firefox since neither of them operate
according to the standard defined in HTML 4.01 where the label property
should be used as the option contents if it is set. If I change it from
setting the label property to setting the text property, it works in IE,
but not in Firefox. According to HTML 4.01 the text property is supposed
to be read only, thus I would expect that''s the reason it doesn''t work in
Firefox. Anyways, some help on this would be appreciated!
David
David wrote:In response to my previous post, I have discovered that I CAN set the text
property in Firefox as well and it works (though I still recall reading that
it is supposed to be a readonly property). Anyways, now my problem is the
following line:
document.getElementById(''slctCategory'').add(newOpt );
If I use this line in IE, it works fine, but it won''t work like this in
Firefox, as it expects a final argument, so if I put it like this it works:
document.getElementById(''slctCategory'').add(newOpt ,null);
I have NO idea why on earth it should expect that final argument,
particularly when it has to be null, but Firefox will not add the new option
otherwise. Anyways, I could obviously use my global "isIE" variable to make
the code branch here but that is something I am trying to avoid. Is there a
different way of going about this all which would be better?
"David" <dk****@hotmail.com> wrote in message
news:h8********************@comcast.com...Can anyone give me a quick code snippet (that is standards-based) for
adding OPTION tags to a SELECT dynamically. I have no problem doing it in
IE but I am kind of new to the whole standards world and can''t figure out
how to make it work in, for instance, Firefox. Right now the code I am
using is as follows:
newOpt=document.createElement(''OPTION'');
newOpt.id=''optKeyword'';
If you are adding multiple options, ensure the IDs are unique.
newOpt.label=''Keyword'';
Option elements do not have a ''label'' property. Label elements can
contain form controls, but an option element is not a form control, it''s
the child of a select (which is a form control). At least that is my
reading of the spec.
document.getElementById(''slctCategory'').add(newOpt );
The following should suit:
var txt = ''Keyword'';
var val = ''Some value'';
var newOpt = new Option( txt, val, false, true );
myList.options[myList.options.length] = newOpt;
''txt'' is the option text, ''val'' the option value and ''false'' modifies
the option''s selected attribute (true would make the option selected).
The first two parameters are required, the rest can usually be omitted
but it''s probably good practice to include them.
I''m not sure it''s 100% ''DOM compliant'', but the real test is whether it
works reliably in the great majority of browsers without undue
side-effects - I think it meets those criteria.
There is a thread here that may help:
<URL:http://groups-beta.google.com/group/comp.lang.javascript/browse_frm/thread/af6e808b089f60f8/0a5222cd15fc5e11?q=add+option+select+drop+down+IE& rnum=3&hl=en#0a5222cd15fc5e11>
[...]
--
Rob
RobG wrote:
[...]
The following should suit:
var txt = ''Keyword'';
var val = ''Some value'';
var newOpt = new Option( txt, val, false, true );
myList.options[myList.options.length] = newOpt;
''txt'' is the option text, ''val'' the option value and ''false'' modifies
the option''s selected attribute (true would make the option selected).
The first two parameters are required, the rest can usually be omitted
but it''s probably good practice to include them.
Forgot to add that the last parameter (set to ''true'' above) sets whether
the option is the currently selected option.
--
Rob
这篇关于动态添加OPTION标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
