203751 - setAttribute('selected', 'selected') on an option element does not give an option element with attribute&value pair selected="selected"

Status: RESOLVED FIXED

(Core :: DOM: Core & HTML, defect, P3)

Description

[Brian Donovan]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4a) Gecko/20030401
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4a) Gecko/20030401

I'm working on a JavaScript class that uses the DOM to create forms on the fly
and discovered that I could not set the selected attribute of OPTION elements
within SELECTs to "selected" (considered XHTML best practice) or, in fact, to
any other value.

The simplest way of reproducing this phenom is to create an option element, set
the selected attribute, then check it :

var nodeOption = document.createElement('option');
nodeOption1.setAttribute('selected', 'selected');
alert('value of selected attribute : ' + nodeOption1.getAttribute('selected'));

nodeOption1.getAttribute('selected') returns only an empty string...

It's unlikely that I'll be running the form markup generated by my class through
a validator at any point, but I typically use the XHTML strict dtd, but it's
puzzling that I can create a nonsense attribute with name "foo" and set its
value to "bar", for example, but Moz won't allow me to set the selected
attribute to value "selected" (good news : checked/checked works for checkboxes
and radio buttons).

Reproducible: Always

Steps to Reproduce:

Comment 1

[Chris Casciano]

Brian,
Can you attach a simplified testcase showing the problem?

Comment 2

[Brian Donovan]

* The snippet below, I pasted in from a larger piece of code (hence the
nodeOption vs nodeOption1 .. ugh, sorry)
* here's the simplest testcase :

<a
href="http://test.lophty.com/mozilla_testcases/test_setAttribute_selected_selected.htm">http://test.lophty.com/mozilla_testcases/test_setAttribute_selected_selected.htm</a>

Comment 3

[Joelle]

Attachment: Image of browser with dropdown not selected

Comment 4

[Joelle]

I think I'm having a similar problem. 
Browser: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.4) Gecko/20030624
Text Editor: Dreamweaver Ultra Dev. 

I've got code that creates a dropdown box. The resulting HTML looks like this: 

		<select NAME='level'>
		<option value = 1> Primary</option>
		<option value = 2> Primary/Intermediate</option>
		<option  selected value = 3> Intermediate</option>
	        <option value = 4> Intermediate/Adolescent</option>
		<option value = 5> Adolescent</option>
		</select> 

However, it doesn't display option number 3 as selected. It does render
correctly using IE.

I'm willing to be told that I'm doing something stupidly wrong. :)

Thanks!

Comment 5

[Fabian Guisset]

Sorry for being late in responding.. here are my thoughts on this "bug":

getAttribute("selected") for an option element returns an empty string. This is
because StringToAttribute for option elements gives an empty value to the
selected and disabled attributes. This should be changed imho (unless it's for
backwards compat reasons). So setAttribute works fine but in fact getAttribute
doesn't return the correct string. There is another problem to StringToAttribute
as it stands: selected="false" doesn't work. (jst?)

To summarize, everything works apart from getAttribute because of
StringToAttribute in nsHTMLOptionElement.cpp
Confirming marking NEW. Puzzling for web devs so setting P3, tm future

BTW, is it just me or does .label not work in Mozilla? (for option elements)

Comment 6

[jon stephens]

I've encountered this issue with Moz 1.5/Windows -- both
HTMLOptionElement.selected and HTMLOptionElement.getAttribute("selected") appear
to return a value of null when used with options within a <select multiple>
element. I ran into this when trying to copy only the selected options in a
<select multiple> element.

In addition, there appear to be major issues with HTMLOptionElement.cloneNode(),
HTMLSelectElement.appendChild(), and HTMLSelectElement.removeChild() in
conjunction with <select multiple> using HTML 4.01 Trans. I've not yet tested
with XHTML doctype.

Example:

<form>
<table>
  <tr>
    <td>
      <select name="myselect" size="5" multiple>
        <option value="PHX">Phoenix</option>
        <option value="BRI">Brisbane</option>
        <option value="DFW">Dallas-Ft. Worth</option>
        <option value="CHI">Chicago</option>
        <option value="LAX">Los Angeles</option>
      </select>
    </td>
    <td id="forNewSelect"></td>
  </tr>
  <tr>
    <td colspan="2">
      <input type="button" value="Make Copy" 
             onclick="makeCopy(this.form.myselect);">
    </td>
  </tr>
</table>
</form>

<script type="text/javascript">

function makeCopy(selectObj)
{
  var copy = selectObj.cloneNode(true);
  copy.name += "_copy";

  var cOptions = copy.options;
  for(var i=0; i<cOptions.length; i++)
  {
    if(cOptions[i].selected)
      cOptions[i].removeAttribute("selected");
    else
      copy.removeChild(cOptions[i]);
  }

  var newSelectTd = document.getElementById("forNewSelect");
  newSelectTd.appendChild(copy); 
}
</script>

I have tried to do the same thing with numerous variations on the
collections/object references used, e.g.

var cOptions = copy.getElementsByTagName("option");

if(cOptions.item(i).getAttribute("selected") == "true") {...}
//  typeof cOptions[i].selected is reported as Boolean and not String, btw...

onclick="makeCopy(document.getElementsByName('myselect')[0]);"

etc.

If I'm making some horribly boneheaded mistake here, I'd appreciate knowing
about it.

Comment 7

[jon stephens]

I rewrote my test case from scratch and now it works fine. I also see that this
bug was for setting not getting this property, so my comment was misplaced in
any case.

Please disregard my previous comment, and accept my apologies. Feel free to
delete it if desired.

Comment 8

[Tilman Bregler]

i don't agree that setAttribute works.

in the following example, getAttribute returns an empty string no matter 
whether 'selected' was set to 'true' or 'false', and moreover the select 
element selects the last option (here called 'test9'), instead of the fourth.

<select name="select" size="1">
</select>

<script type="text/javascript">
	var select = document.getElementsByName("select")[0];
	var option;
	var text;
	for (var i = 0; i < 10; i++) {
		option = document.createElement("option");
		text = document.createTextNode("test" + i);
		if (i == 3) {
			option.setAttribute("selected", true);
		}
		else {
			option.setAttribute("selected", false);
		}
		option.appendChild(text);
		select.appendChild(option);
		document.write("<br>, " + option.getAttribute("selected"));
	}
</script>

i also tried creating the attribute with document.createAttribute, then setting 
nodeValue = "true" and setting the attribute on the option elt with 
setAttributeNode, with the same results.

the same problem occurs in Netscape 6.2, btw.

Comment 9

[Tilman Bregler]

sorry, i was rash, i tested on an old Mozilla, it's working on 1.6a...

Comment 10

[Boris Zbarsky [:bzbarsky]]

Fixed by the checkin for bug 232706