从列表中创建一个选择并将其放在表中

Question

I'm writing a web application using Java and Spring.

From the controller, I send to the view a list called materials

@RequestMapping(value = "/advanced")
public String advancedCalculation(Model model) {
    model.addAttribute("materials", materialService.getMaterials());
    model.addAttribute("calcForm", new CalculationForm());
    return "advanced";
}

materials is a list of objects called MaterialDTO :

public class MaterialDTO extends DTO {

    /* Constructors */
    public MaterialDTO()                        { super();         }
    public MaterialDTO(Integer id, String name) { super(id, name); }

}

From the client side I have to make tables with buttons to add rows to such tables. Something like:

<table id="1">
    <thead>
    ... 2 columns ...
    </thead>
    <tbody>
    <tr>
        <td>HERE I NEED THE SELECTOR</td>
        <td>column 2</td>
    </tr>
    </tbody>
</table>
.
.
.
<table id=N>
    <thead>
    ... M columns ...
    </thead>
    <tbody>
    <tr>
        <td>HERE I NEED THE SELECTOR</td>
        <td>column 2</td>
        ...
        <td>column M</td>
    </tr>
    </tbody>
</table>

That selector is the same for all tables, so I wanted to create it from the materials list once and use it where I need it. With this last I'm having problems ...

/* Making select */

var materialsList = new Array();
var sel = $('<select>');

<c:forEach items="${materials}" var="material">
    var material = new Object();
    material.id = '${material.id}';
    material.name = '${material.name}';
    materialsList.push(material);
</c:forEach>

$(materialsList).each(function() {
    sel.append($('<option>').attr('value', this.id).text(this.name));
});

That's when I try to add it as HTML and it fails

function add_to_table_1() {
    $('#1')
        .append('<tr><td>' + sel.html() + '</td><td><input type="text" id="e"></input></td><td><input type="text" id="S"></input></td><td><input type="itext" id="r"></input></td><td><button onclick="delete_row(this)">Borrar</button></td></tr>');
}

And instead of the selector appears "[object Object]". How can I fix this?

Answer 1

Try this:

$(sel).wrap('<div></div>').parent().html();

This will fix your select not displaying with your options. Remember .html() only returns innerHTML. The outer html, <select></select> , will not display with it. You have to wrap first.

Alternative:

$(sel)[0].outerHTML