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

Groups > comp.lang.javascript > #19047 > unrolled thread

How to add SELECT element and its Options dynamically?

Back to article view | Back to comp.lang.javascript

Contents

  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

#19047 — How to add SELECT element and its Options dynamically?

Hi,

The following code generates err msg: "TypeError: x is null".
I wonder what's the correct syntax to do it.

Thanks as always.

--------------
// start
var cnt =1;

var cell = document.createElement("td");				
var cellText = document.createElement('input');
cellText.type = 'select';
cellText.id = 'pickUpshipTime'+cnt;
cellText.name = 'pickUpshipTime'+cnt;
cellText.size = "3";					

x=document.getElementById('pickUpshipTime'+cnt);
var option=document.createElement("option");
option.text="EARLY AM";
x.add(option,null);
option.text="9 am - 1 pm";
x.add(option,null);

// end
-----------------

[toc] | [next] | [standalone]

#19048

To justaguy

check http://www.webdevout.net/test?0R&raw

[toc] | [prev] | [next] | [standalone]

#19066

On Friday, March 29, 2013 5:20:26 PM UTC-4, Danny wrote:
> To justaguy
> 
> 
> 
> check http://www.webdevout.net/test?0R&raw

Thanks for the note but it does not address the issue of creating a dynamic Select element.

[toc] | [prev] | [next] | [standalone]

#19065

Hi,

I've found the source of the issue, please see below.

>On Friday, March 29, 2013 4:40:36 PM UTC-4, justaguy wrote:
> Hi,
> 
> 
> 
> The following code generates err msg: "TypeError: x is null".
> 
> I wonder what's the correct syntax to do it.
> 
> 
> 
> Thanks as always.
> 
> 
> 
> --------------
> 
> // start
> 
> var cnt =1;
> 
> 
> 
> 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.

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

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

> 
> cellText.id = 'pickUpshipTime'+cnt;
> 
> cellText.name = 'pickUpshipTime'+cnt;
> 
> cellText.size = "3";					
The above 3 lines of code for a SELECT element should be ok.
 
The following lines of code is to add options for the above newly created Select element, the code has been tested to work.


> 
> x=document.getElementById('pickUpshipTime'+cnt);
> 
> var option=document.createElement("option");
> 
> option.text="EARLY AM";
> 
> x.add(option,null);
> 
> option.text="9 am - 1 pm";
> 
> x.add(option,null);
> 
> 
> 
> // end
> 
> -----------------

[toc] | [prev] | [next] | [standalone]

#19072

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.

[toc] | [prev] | [next] | [standalone]

#19067

Forgive me for top posting.

I've sort of made it work, that is, it is now able to create a new elements with 3 options with defined values, however, it's not a SELECT element because it does not have the Select control.

So, now, the question is what's wrong with the following code that fails to make the newly created element as a SELECT element.
var cellText = document.createElement('select');
cellText.id = 'pickUpshipTime'+cnt;
cellText.name = 'pickUpshipTime'+cnt;
cellText.size = "3";	

Tested browser: Firefox 19 for Windows.

Funny it works perfectly with Chrome 26 for Windows.


On Friday, March 29, 2013 4:40:36 PM UTC-4, justaguy wrote:
> Hi,
> 
> 
> 
> The following code generates err msg: "TypeError: x is null".
> 
> I wonder what's the correct syntax to do it.
> 
> 
> 
> Thanks as always.
> 
> 
> 
> --------------
> 
> // start
> 
> var cnt =1;
> 
> 
> 
> var cell = document.createElement("td");				
> 
> var cellText = document.createElement('input');
> 
> cellText.type = 'select';
> 
> cellText.id = 'pickUpshipTime'+cnt;
> 
> cellText.name = 'pickUpshipTime'+cnt;
> 
> cellText.size = "3";					
> 
> 
> 
> x=document.getElementById('pickUpshipTime'+cnt);
> 
> var option=document.createElement("option");
> 
> option.text="EARLY AM";
> 
> x.add(option,null);
> 
> option.text="9 am - 1 pm";
> 
> x.add(option,null);
> 
> 
> 
> // end
> 
> -----------------

[toc] | [prev] | [next] | [standalone]

#19068

justaguy wrote on 31 mrt 2013 in comp.lang.javascript:

> So, now, the question is what's wrong with the following code that
> fails to make the newly created element as a SELECT element. var
> cellText = document.createElement('select'); cellText.id =
> 'pickUpshipTime'+cnt; cellText.name = 'pickUpshipTime'+cnt;
> cellText.size = "3";     
> 
> Tested browser: Firefox 19 for Windows.
> 
> Funny it works perfectly with Chrome 26 for Windows.

<form></form>

<script type='text/javascript'>

var select = document.createElement('select');
select.name = 'mySelect';
select.id = 'mySelect';
document.forms[0].appendChild(select);

for (var i=1;i<21;i++) {
	var option = document.createElement('option');
	option.value = 'opt' + i;
	option.innerHTML = 'Option ' + i;
	select.appendChild(option);
};

var text = document.createElement('text');
text.innerHTML = '<br>';
document.forms[0].appendChild(text);

var submit = document.createElement('input');
submit.type = 'submit';
document.forms[0].appendChild(submit);

</script>

tested: chrome, ff, IE10

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web