Solved

Enclose SELECT in SPAN using javascript

Posted on 2007-11-26
6
1,335 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

791 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