1

I am using javascript and IE11 to implement the code below to add options in a combo box by using javascript

    var bSelected = false;

    for (count of elements to be created)
    {
          **// set value and text and whether to selected the element or not**

          // Create an option and add it to the combo
          opt = document.createElement ("option");
          opt_txt = document.createTextNode (textPart);
          opt.appendChild (opt_txt);
          opt.setAttribute ("value", valuePart);
          opt.setAttribute ("text", textPart);
          opt.setAttribute ("selected", bSelected);
    }

Now even if selected is set to false, opt.selected attribute it always comes out as true. As soon as element is created by createElement function, the default value is true. Please help why it is not changing to false ?

In IE9, it works fine (different HTML version?)

Aiden
  • 460
  • 2
  • 11
  • 29
  • have you tried to not set selected at all? – Kasia Jan 30 '17 at 08:32
  • Wait till you completely populate the select element (with all options) and then set selected on the one you want. Setting it individually is a waste (but it should work). – Reinstate Monica Cellio Jan 30 '17 at 08:33
  • a drop-down listbox always shows an option as selected, so if you have just created it, the first item is selected. – trincot Jan 30 '17 at 08:33
  • opt.setAttribute ("selected", bSelected); is not useful for me, I do not want ANY option to be selected on page load. But thing is, createElement has selected attribute always as true by default. I will try with removing this line – Aiden Jan 30 '17 at 08:35
  • 1
    @trincot in my case, all options are coming as selected :( – Aiden Jan 30 '17 at 08:36
  • Is there are way to DESELECT all the values on page load ? – Aiden Jan 30 '17 at 08:37
  • 2
    Just remove `opt.setAttribute ("selected", bSelected);`. Simply having `selected` in there, whether true or false, is selecting the element. – allnodcoms Jan 30 '17 at 08:39
  • Please add the HTML markup for that `select` you are using. – trincot Jan 30 '17 at 08:39
  • http://stackoverflow.com/questions/706384/boolean-html-attributes If you want to set the selected one, use the `.selected` property of your elements. – Kaiido Jan 30 '17 at 08:40
  • You have to have one of them selected. If you want to force the user to make a selection then make the 1st option something like *"Choose an option"* and set that to be selected. Also, please post the actual complete relevant code (no pseudo code) as the problem may lay elsewhere. – Reinstate Monica Cellio Jan 30 '17 at 08:43
  • Thanks to all the geniuses out there! It has been resolved by removing opt.setAttribute ("selected", bSelected); Thanks – Aiden Jan 30 '17 at 08:43
  • Possible duplicate of [Boolean HTML Attributes](http://stackoverflow.com/questions/706384/boolean-html-attributes) – user692942 Jan 30 '17 at 21:05

1 Answers1

4

The only allowed value for the selected attribute is "selected" (or "" which means the same thing), but error recovery in browsers means that any value will be treated as if it were "selected".

When you call opt.setAttribute ("selected", bSelected);, the value of bSelected is converted to a string and set to the value.

In this case false is converted to "false" and treated as "selected".

When dealing with boolean attributes, if you don't want them set, then don't set them at all.

Alternatively, you can set the selected DOM property instead of the attribute. The property does take true and false rather than "selected".

opt.selected = bSelected;
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335