I have an HTML table which is typically 10-30 rows long with a column for "item name". The drop down itself has around 75 products to choose from. To make the page size smaller, I wanted to reuse a single drop down list for every row.

That is, when I click a row, jQuery should

1. Read the item name in the TD
2. Load the drop down list into the TD
3. Select the active value as the previous text value
4. On row exit, reverse the process

The items in the drop down are populated from a database on page load. I'm thinking the best way is to keep the list hidden and only make it appear in that spot as needed. But I'm not sure how to acplish step 2 and 3

Edit

Not sure what code you're looking for since that's what my question is. But if I had something like below, I need to put that hidden select list into the active row and make it select to the value already in the table cell.

<table>
    <tr>
        <td>Item Name</td>
        <td>Item Value</td>
    </tr>
    <tr>
        <td>Product A</td>
        <td>166.22</td>
    </tr>
    <tr>
        <td>Product B</td>
        <td>166.22</td>
    </tr>
</table>

<select id="itemname" style="display:none;">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>

Edit 2- Probable Solution

Based off one of the responses below, I poked around a bit and was able to create this script which works. Not sure if I can make it more efficient, but it does what I was looking for. The function takes "e" as a TD

    function addItem(e) {
        if ($(e).find('select').length) {
            var input = $(e).find('select').eq(0);
            $(e).text($(input).val());
            $(input).appendTo($('.promotion-header'));
        }
        else {
            var text = $(e).text();
            $(e).text('');
            $('#itemname').appendTo(e).val(text).show();
        };
    }

I have an HTML table which is typically 10-30 rows long with a column for "item name". The drop down itself has around 75 products to choose from. To make the page size smaller, I wanted to reuse a single drop down list for every row.

That is, when I click a row, jQuery should

1. Read the item name in the TD
2. Load the drop down list into the TD
3. Select the active value as the previous text value
4. On row exit, reverse the process

The items in the drop down are populated from a database on page load. I'm thinking the best way is to keep the list hidden and only make it appear in that spot as needed. But I'm not sure how to acplish step 2 and 3

Edit

Not sure what code you're looking for since that's what my question is. But if I had something like below, I need to put that hidden select list into the active row and make it select to the value already in the table cell.

<table>
    <tr>
        <td>Item Name</td>
        <td>Item Value</td>
    </tr>
    <tr>
        <td>Product A</td>
        <td>166.22</td>
    </tr>
    <tr>
        <td>Product B</td>
        <td>166.22</td>
    </tr>
</table>

<select id="itemname" style="display:none;">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>

Edit 2- Probable Solution

Based off one of the responses below, I poked around a bit and was able to create this script which works. Not sure if I can make it more efficient, but it does what I was looking for. The function takes "e" as a TD

    function addItem(e) {
        if ($(e).find('select').length) {
            var input = $(e).find('select').eq(0);
            $(e).text($(input).val());
            $(input).appendTo($('.promotion-header'));
        }
        else {
            var text = $(e).text();
            $(e).text('');
            $('#itemname').appendTo(e).val(text).show();
        };
    }

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 30, 2013 at 1:02 JohnB asked Oct 30, 2013 at 0:12 JohnBJohnB 1,79355 gold badges2121 silver badges4242 bronze badges 4

• 2 what do you have already do? – msangel Commented Oct 30, 2013 at 0:15
• 1 Please show your code, both HTML and javascript. – ahren Commented Oct 30, 2013 at 0:18
• I wouldn't even bother moving it into table.... just reposition the select over the appropriate row each time – charlietfl Commented Oct 30, 2013 at 0:56
• do you want to replace the item name TD with the dropDownList?? – Md Ashaduzzaman Commented Oct 30, 2013 at 1:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Try copying all elements of the main div to all other div using by setting and getting html from .html() method. Here in the demo, all elements in myDropDownListDiv is copied to anotherDiv.

HTML :

<div id="myDropDownListDiv"><select id="itemname">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>
</div>
    <div id="anotherDiv">
</div>

jQuery :

$(document).ready(function(){
    //copies all contents of myDropDownListDiv into anotherDiv
    $("#anotherDiv").html($("#myDropDownListDiv").html());
});

Demo