[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1350
  • Last Modified:

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
0
texaspete
Asked:
texaspete
1 Solution
 
Sinoj SebastianCommented:
I think instead of "td2.appendChild(sel);" you need "span.appendChild(sel);"
0
 
Pravin AsarCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Pravin AsarCommented:
>> 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

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now