Enclose SELECT in SPAN using javascript

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
texaspeteAsked:
Who is Participating?
 
Sinoj SebastianConnect With a Mentor CTO & OpenERP Project managerCommented:
I think instead of "td2.appendChild(sel);" you need "span.appendChild(sel);"
0
 
Pravin AsarPrincipal Systems EngineerCommented:
td2.appendChild(sel);

should this be

span.appendChild(sel);
0
 
gops1Commented:
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
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
Pravin AsarPrincipal Systems EngineerCommented:
>> 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
 
texaspeteAuthor Commented:
Nice one sinoj ! That worked a treat thanks. Also thanks to others with same solution
0
 
Maverick_CoolCommented:
Directly apply CSS to the Select instead of using span, that will simplify the problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.