I am trying to convert already populated dropdownlist to a single textbox via javascript or jQuery but cant figure it out!

I would like to remove/change The "Select" to "td" element resulting the value in this case "9100" would be displayed in the textbox and not the Drop-down list.

You probably ask why I am doing this, but the answer is quite plicated becouse of dynamic HTML construction. Is there any way abovementioned problem can be solved via Jquery or javascript? Thanx in advance !

<td class="mainstuff" style="padding-right:0; width:1%; ">
<select id="stuff" class="boxed" title="" name="stuff">
    <option value="9100" title="Something:">9100</option>
</select>
</td>

I am trying to convert already populated dropdownlist to a single textbox via javascript or jQuery but cant figure it out!

I would like to remove/change The "Select" to "td" element resulting the value in this case "9100" would be displayed in the textbox and not the Drop-down list.

You probably ask why I am doing this, but the answer is quite plicated becouse of dynamic HTML construction. Is there any way abovementioned problem can be solved via Jquery or javascript? Thanx in advance !

<td class="mainstuff" style="padding-right:0; width:1%; ">
<select id="stuff" class="boxed" title="" name="stuff">
    <option value="9100" title="Something:">9100</option>
</select>
</td>

• javascript
• jquery
• html

3 Answers 3

You can loop through each option and create a new TableRow for each option. for each TableRow you can fill in the Value of the option fields.
Afterwards you can add the created rows to a table object. Hope this tells you the basic idea. greets

Here's a fiddle demonstrating what @CyrillC explained: http://jsfiddle/pnRQb/

You can do this

   var html = "<input id='stuff' type='textbox' value="
               + $("#stuff option:first").val() +" />";
   $("#stuff").remove();
   $(".mainstuff").append(html);

See the demo on jsFiddle

You can tweak it according to your requirement.

Hope this helps you.