Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Enclose SELECT in SPAN using javascript

Posted on 2007-11-26
6
Medium Priority
?
1,348 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 12

Accepted Solution

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

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 29

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

New feature and membership benefit!

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

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

618 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