[RESOLVED] Creating select element

@ruchi_bhindwaleSep 11.2007

I have a dropdown list which has two options A and B. I wish to dynamically generate drop down menu with options A1, A2, A3 if the user selects A and B1 , B2, B3 if the user selects option B . I tried creating a select element and appending it to the document but everytime it gives some error.Am unable to create a select element. Can anyone please help me out ? Currently the code should generate select element on clicking on the submit button but it doesnot work.Please have a look.

var option1 = document.createElement(‘option’);
option1.setAttribute(‘value’,’1′);
var text1 = document.createTextNode(‘A1’);
option1.appendchild(text1);
select1.appendchild(option1);
document.getElementById(‘Form1’).appendchild(select1);
</script>
</head>

Thanks

to post a comment

JavaScript

6 Comments(s) _↴

@CrazyMerlinSep 11.2007 — #The actual options are not elements, but objects, so you don't use the createElement notation. The options then reside in an array(options array) which is a member of the select element.

try this:

<i>
 </i>//format is: text, value, defaultSelected, selected
 //defaultSelected means is this the default option
 //selected means is this the current option
 var option1 = new Option("A1", "1", false, false);
 select1.options.push(option1);
 //or you can use select.options[0] = option1;

Hope that makes sense to you

@mrhooSep 11.2007 — #Your script works fine in Firefox and IE7, once you correct [B]appendchild [/B]and close the function ([B]}[/B]):

[CODE]function showMethod(){
 var select1= document.createElement('select');
 select1.setAttribute('name','A');
 select1.setAttribute("size","1");
 var option1= document.createElement('option');
 option1.setAttribute('value','1');
 var text1= document.createTextNode('A1');
 option1.appendChild(text1);
 select1.appendChild(option1);
 document.getElementById('Form1').appendChild(select1);
 }[/CODE]

I think IE6 had problems with setting the text for options-

if that is the case, instead of creating text nodes for options,

simply set the text property-

var option1= document.createElement('option');

option1.text='A1';

This will work in the other browsers as well.

@toicontienSep 11.2007 — #The actual options are not elements, but objects, so you don't use the createElement notation. The options then reside in an array(options array) which is a member of the select element.[/QUOTE]
The [B]new Option()[/B] function is a browser-hacked shortcut for creating a new OPTION element. The .options array in a SELECT is a series of node references to the OPTION tags inside it. the new Option() syntax is legacy code to support older browsers, which didn't implement the DOM correctly (mostly because the "DOM" as we know it really wasn't invented yet). Both methods work. Using the "new Option()" syntax is the legacy method, and using appendChild and document.createElement() is the standard DOM method.

@WebTechSep 11.2007 — #I'm not sure if this is the route you are going, but I created a form with two select elements that seems a little more simple:

<form>

Background:

<SELECT NAME="background" SIZE=0 onChange="document.bgColor=this.options[selectedIndex].value;">

<OPTION VALUE="#0000FF">blue

<OPTION VALUE="#FF0000">red

<OPTION VALUE="#FFFFFF">white

</SELECT>

Text:

<SELECT NAME="text" SIZE=0 onChange="document.fgColor=this.options[selectedIndex].value;">

<OPTION VALUE="#0000FF">blue

<OPTION VALUE="#FF0000">red

<OPTION VALUE="#FFFFFF">white

</SELECT>

</form>

This will allow the user to change both the background and the text colors by using a drop-down box for each.

Hope that helps.

@ruchi_bhindwaleauthorSep 13.2007 — #Thanks a tonn for the help . I am able to create the select + option element in the DOM tree but now I have a new problem . I have a couple of text inputs whose values I need to send to say result.php which does some computation. Along with these I also need to send the option value of the dynamically created element. I created one form for the all the text inputs which has the action field result.php while another form for the select element which will dynamically generate the other elements and add it to the first form so that even their values be sent to result.php. But I return to the same form on submit . Enclosing below the code.

<html>

<head>

<script type="text/javascript">

function showMethod()

{

var x = document.getElementById("selectstate");

var y = x.options[x.selectedIndex].value

if(y == 1)

{

 var text1= document.createElement('text');
   text1.setAttribute('size','7');
 
   document.getElementById('form1').appendChild(select1);
   }

else if(y==2)

{

 var text2= document.createElement('text');
   text2.setAttribute('size','10');
 
   document.getElementById('form1').appendChild(select1);
  }

}

</script>

</head>

<body>

<form id="form1" method="get" action="result.php" enctype="multipart/form-data">

<DIV style="position:absolute; left:100px; top:225px; width:500px; height:15px; z-index:42" align="left" valign="top">

<FONT style="FONT-SIZE:16pt" color="#000000" face="Arial">Text1</FONT>

</DIV>

<INPUT type="text" style="position:absolute;left:250px;top:225px;width:100px;z-index:39" size="7" name="text1" value="">

<INPUT type="submit" name="finalSubmit" value="Final Submit" style="position:absolute;left:449px;top:500px;z-index:76" >

</form>

<form id="form2" method="get" enctype="multipart/form-data">

<DIV style="position:absolute; left:100px; top:325px; width:500px; height:15px; z-index:42" align="left" valign="top">

<FONT style="FONT-SIZE:16pt" color="#000000" face="Arial">Select Option</FONT>

</DIV>

<select name="State" id="selectstate" size="1" style="position:absolute;left:250px;top:325px;width:50px;font-family:MS Shell Dlg;z-index:48">

<option value ="1">A</option>

<option value ="2">B</option>

</select>

<INPUT type="submit" name="Submit" value="Submit" style="position:absolute;left:449px;top:425px;z-index:76" onClick="showMethod()">

</form>

</body>

</html>

Logically I am not able to find the error. Do I need to look into the action field for the second field ? Do I need to specify the location of the dynamic text box ?

Thanks for the help in advance

@ruchi_bhindwaleauthorSep 13.2007 — #I have this problem that my form has few text input fields and a select option . According to what the user chooses from the select, further select elements are dynamically generated and added to form1 which contains the text fields. I need to send the value of the dynamically generated select as well as the text fields to result.php .Am unable to dynamically generate the select option. Do I need to look into the action field of the forms??

Enclosing the code

[CODE]<html>
 <head>
 <script type="text/javascript">
 
 function showMethod()
 {
 var x = document.getElementById("selectstate");
 var y = x.options[x.selectedIndex].value
 
 if(y == 1)
 {
 
   var select1= document.createElement('select);
   select1.setAttribute('size','7');
 
   document.getElementById('form1').appendChild(select1);
   }
 else if(y==2)
 {
 
   var select1= document.createElement('select');
   select1.setAttribute('size','10');
 
   document.getElementById('form1').appendChild(select1);
  }
 }
 </script>
 </head>
 
 <body>
 
 <form id="form1" method="get" action="result.php" >
 
 <INPUT type="text" style="position:absolute;left:250px;top:225px;width:100px;z-index:39" size="7" name="text1" value="">
 <INPUT type="submit" name="finalSubmit" value="Final Submit" >
 
 </form>
 
 <form id="form2" method="get" >
 
 <select name="State" id="selectstate" size="1" 
 <option value ="1">A</option>
 <option value ="2">B</option>
 </select>
 
 <INPUT type="submit" name="Submit" value="Submit" onClick="showMethod()">
 </form>
 </body>
 
 </html>[/CODE]

Thanks for the help in advance

Also in #JavaScript _↴

Color works in IE but not FF?Back button fails if there is hash in the previously clicked URL changing the layer Locz

Success!

Help @ruchi_bhindwale spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] Creating select element

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] Creating select element

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴