Question

I have a table I want to populate with data as a user makes a choice using a form. Eventually it will have cost added to the tco cell.

<table style="width:100%; padding:0;margin:0;" id="ch1">
<tbody>
    <tr class=""childname">
        <td class="cn"></td>
        <td class="ca"></td>
        <td class="cs"></td>
    </tr>
    <tr class="cl1">
        <td colspan="2" class="tcl"></td>
        <td class="tco"></td>
    </tr>
    <tr class="cl2">
        <td colspan="2" class="tcl"></td>
        <td class="tco"></td>
    </tr>
</table>

I can add the selection to a hidden field #cl1a but not the table cell.

$("#classA1").change(function () {
var cl1 = '';
$("#classA1 option:selected").each(function () {
        $("#cl1a").val($(this).val());
        $("#resultbox table#ch1 tr.cl1 td.tcl").text($(this).val());
    });
});

I know the #resultbox table@ch1 tr.cl1 td.tcl is correct because I can change the style using that path.

Answer 1

I suppose you wonder why your code is not assigning the value of option :selected to the cell td.tcl.

Well, first:

• Your HTML is wrong. You need to close the tag tbody.
• There also are two quotes in the class ""childname", which further spoils the HTML.
• You need your jQuery code to run when the document is ready. I don’t know if your full code had it, since you didn’t make clear whether it’s using $(document).ready, what is needed.

So, I created a sample correcting these problems: http://jsbin.com/iruqe5/edit.