Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19072

Re: How to add SELECT element and its Options dynamically?

Show all headers | View raw

justaguy wrote:

>> On Friday, March 29, 2013 4:40:36 PM UTC-4, justaguy wrote:
>> var cell = document.createElement("td");
> 
> The following block of code is to create a dynamic SELECT element.
>  
>> var cellText = document.createElement('input');
> 
> The above code is incorrect because Select element is different from Text
> element, hence, using 'input' for 'select' it won't work.
> 
> So, I attempted to replace 'input' with 'select' in the above line, and
> yet still to no avail.

Doubtful.
 
> So, question, how do we create a dynamic Select element?

Use 'select' instead of 'input'.

>> cellText.type = 'select';
> Since select has been specified I commented out the above line, and yet
> still to no avail.

The “type” property of “select” element objects is read-only, and the value 
"select" is not supported.  If you want to allow for multiple selections, 
set the “multiple” property to “true” (upon which the value of the “type” 
property changes from the default "select-one" to "select-multiple").

>> cellText.id = 'pickUpshipTime'+cnt;
>> 
>> cellText.name = 'pickUpshipTime'+cnt;
>> 
>> cellText.size = "3";
> The above 3 lines of code for a SELECT element should be ok.

They are not.  The value of the “size” property must be a Number.

<http://www.w3.org/TR/2012/CR-html5-20121217/forms.html#the-select-element>
  
> The following lines of code is to add options for the above newly created
> Select element, the code has been tested to work.

Where?

>> x=document.getElementById('pickUpshipTime'+cnt);
>> 
>> var option=document.createElement("option");
>> 
>> option.text="EARLY AM";
>> 
>> x.add(option,null);

This will work where the HTMLSelectElement interface of HTML5 and W3C DOM 
Level 2 HTML is implemented, but not where the MSHTML DOM is implemented.

Do not use the add() method of “select” element objects, because it is not 
interoperable.  Use cellText.appendChild() instead (but see below), where 
“cellText” is a reference to the “select” element here.  (Choose a more 
descriptive identifier.)

- <http://www.w3.org/TR/2003/REC-DOM-Level-2-
HTML-20030109/html.html#ID-14493106>
- <http://msdn.microsoft.com/en-us/library/ms535921(v=vs.85).aspx>

>> option.text="9 am - 1 pm";

This modifies the text of the option just added as the “option” reference 
has not changed.  You need to create a *new* element object and modify *its* 
properties.

>> x.add(option,null);

The proprietary, backwards-compatible way is

  var option = new Option();
  option.text = "EARLY AM";

The “Option” constructor also takes arguments for the “text”, “value”, 
“defaultSelected”, and “selected” properties [1], but I will probably 
forever forget the correct order.  Using the properties of the newly created 
object is explicit and easily maintainable by comparison, and equally 
compatible (HTML5, W3C DOM Level 2 HTML, and DOM Level 0 are compatible in 
that regard).

<http://docs.oracle.com/cd/E19957-01/816-6408-10/option.htm>

Note that the text of an “option” element may not be what is submitted, nor 
should the value of an “option” or the submitted value of a form control be 
dependent on its display (consider i18n).

Please get a real name.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

How to add SELECT element and its Options dynamically? justaguy <lichunshen84@gmail.com> - 2013-03-29 13:40 -0700
  Re: How to add SELECT element and its Options dynamically? Danny <dann90038@gmail.com> - 2013-03-29 14:20 -0700
    Re: How to add SELECT element and its Options dynamically? justaguy <lichunshen84@gmail.com> - 2013-03-30 18:04 -0700
  Re: How to add SELECT element and its Options dynamically? justaguy <lichunshen84@gmail.com> - 2013-03-30 18:03 -0700
    Re: How to add SELECT element and its Options dynamically? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-03-31 18:15 +0200
  Re: How to add SELECT element and its Options dynamically? justaguy <lichunshen84@gmail.com> - 2013-03-30 18:28 -0700
    Re: How to add SELECT element and its Options dynamically? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-03-31 11:17 +0200

csiph-web