Solved

Enclose SELECT in SPAN using javascript

Posted on 2007-11-26
6
1,326 Views
Last Modified: 2010-04-21
Hi There,

I'm trying to create a dropdown inside a SPAN tag on the fly using js. Creating the select is not a problem but putting a span around it is.

Here is the html id like to create:

 <td>
       <span style="display:block; width:0px" id="action_business_unit_span1">
      <select id="action_business_unit1" name="action_business_unit1">
            <option value="select an option...">select an option...</option>
            <option value="Child">Child</option>
             <option value="Pensions">Pensions</option>
      </select>
      </span>
</td>

Heres a snippet of what i'm trying in js:

  var td2 = document.createElement("TD")

  var span = document.createElement("SPAN");
  span.setAttribute("style","display:block; width:0px");
  span.setAttribute("id","action_business_unit_span" + row_no);

  td2.appendChild(span);

  var sel = document.createElement("select");
  sel.name = 'action_business_unit' + row_no;
  sel.id = 'action_business_unit' + row_no;

  sel.options[0] = new Option("select an option...", "select an option...", true);
  sel.options[1] = new Option("Child", "Child");
  sel.options[3] = new Option("Pensions", "Pensions");


  td2.appendChild(sel);
  row.appendChild(td1);
  row.appendChild(td2);

This still creates the select ok but when I try to change the style of the span with a further piece of js the script bombs out (with no error) as if the span doesn't exist.

Any ideas?

TP
0
Comment
Question by:texaspete
6 Comments
 
LVL 12

Accepted Solution

by:
Sinoj Sebastian earned 200 total points
ID: 20350090
I think instead of "td2.appendChild(sel);" you need "span.appendChild(sel);"
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 20350120
td2.appendChild(sel);

should this be

span.appendChild(sel);
0
 
LVL 17

Expert Comment

by:gops1
ID: 20350228
remove this line from its current position --> td2.appendChild(span);

and put them together after creating select tag:

span.appendChild(sel);
td2.appendChild(span);
row.appendChild(td2);
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 28

Expert Comment

by:Pravin Asar
ID: 20350279
>> This still creates the select ok but when I try to change the style of the span with a further piece >> of js the script bombs out (with no error) as if the span doesn't exist.

If you want to set the style of span at the time of creation, just do

<style type="text/css">
span.mySpanStyle { color : #443322; background-color: #112233; }
</style>


JS code:

span.className = 'mySpanStyle';


It will be better if you code for span style settings.

0
 

Author Closing Comment

by:texaspete
ID: 31410977
Nice one sinoj ! That worked a treat thanks. Also thanks to others with same solution
0
 
LVL 7

Expert Comment

by:Maverick_Cool
ID: 20350330
Directly apply CSS to the Select instead of using span, that will simplify the problem.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now