为html表格行中的每个选择框动态添加选项答案

【问题标题】：Add options to each select box in html table row dynamically为html表格行中的每个选择框动态添加选项
【发布时间】：2017-11-29 21:08:27
【问题描述】：

我有一个动态创建的 HTML 表格。在每一行都是一个下拉列表，我需要在下拉列表中添加选项。但是，我的代码只会将值添加到第一行。

这是我创建表格并尝试添加选项的方式。

        $.post(     

       'dataform.php',
        { functionname: JSON.stringify('operation'), args:part},
        function(response) {
        result = JSON.parse(response);



            block = []
            for (var item in result){

              var objectItem = result[item];

          var opnum = objectItem.opnum;
          var opdesc = objectItem.opdesc;
          var wc = objectItem.wc;
          var sel = document.createElement("select");
              sel.type = "select";
              sel.id = "sel";
              sel.value = wc;
          var activity = objectItem.activity;
          var machine = objectItem.machine;
          var direct_labor = objectItem.direct_labor;

            block.push(opnum);
            block.push(opdesc);
            block.push(wc);
            block.push(sel);
            block.push(activity);
            block.push(machine);
            block.push(direct_labor);
            ops.push(block);
            block = [];

                }

            for (var i = 0; i < ops.length; i++) {
            tr = document.createElement('tr');
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td'));
            tr.appendChild(document.createElement('td')); 



            tr.cells[0].appendChild(document.createTextNode(ops[i][0]));
            tr.cells[1].appendChild(document.createTextNode(ops[i][1]));
            tr.cells[2].appendChild(ops[i][3]);
            tr.cells[3].appendChild(document.createTextNode(ops[i][4]));
            tr.cells[4].appendChild(document.createTextNode(ops[i][5])); 
            tr.cells[5].appendChild(document.createTextNode(ops[i][6]));
            table.appendChild(tr);

            }

            tablearea.appendChild(table);           


        }, 
    )

$.post(
    'dataform.php',
    {functionname: JSON.stringify('wc')},
    function(response) {
        result = JSON.parse(response);

            block = []
            for (var item in result){

            var objectItem = result[item];

            var wrkc = objectItem.wc
            var act_key = objectItem.activity;

            debugger;
            $.each($('#sel').append($("<option></option>").html(wrkc)));

        }


    }

)   


})

我尝试在每次创建单元格时都附加这些选项，并且得到了相同的结果。

任何帮助将不胜感激。

谢谢！

【问题讨论】：

请提供小提琴以获得更好的答案。链接：jsonwrapper.com/…
您不能在页面中重复元素 ID。根据定义，它们是独一无二的。使用类来定位选择

标签： javascript jquery html dynamic

【解决方案1】：

('#sel') ID 选择器在内部使用document.getElementById()，它只能返回一个元素。所以它只会增加一个。如果要将类附加到包含所述类的每个元素，请使用类。

【讨论】：