Question

我尝试制作动态下拉列表但不起作用。

当我点击“添加行”按钮时，它会像这样改变。

我真的想像第一个列表那样更改添加的下拉列表，但是没有数据。

这是代码。

    <button id='btn-add-row'>Add Row</button>
    <button id='btn-delete-row'>Delete Row</button>
       <script src="//code.jquery.com/jquery.min.js"></script>
       <script>
        $('#btn-add-row').click(function() {
          $('#mytable > tbody:last').append('<tr><td><input type="checkbox"><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>' +
        '<tr><td><td></td><td><select id="slist"></select></td><td></td></tr>');
      });
        $('#btn-delete-row').click(function() {
          $('#mytable > tbody:last > tr:last').remove();
          $('#mytable > tbody:last > tr:last').remove();
       });

      setattr();

      function setattr(){
          var myobject = {
            ValueA : 'Text A',
            ValueB : 'Text B',
            ValueC : 'Text C'
        };

        var select = document.getElementById("slist");
        for(index in myobject) {
            select.options[select.options.length] = new Option(myobject[index], index);
        }

        if(select.options.length > 0) {
          //  window.alert("Text: " + select.options[select.selectedIndex].text + "\nValue: " + select.options[select.selectedIndex].value);
        }
        else {
            window.alert("Select box is empty");
        }
      }
      </script>

感谢您的帮助。

Answer 1

我的解决方案是使用DOM方法并发布到jsfiddle.net。

var myTable=document.getElementById("mytable");
$('#btn-add-row').click(function() {
 row=mytable.insertRow(mytable.rows.length);
cell=row.insertCell(row.length);
cell=row.insertCell(row.length);
cell=row.insertCell(row.length);
dropDownBox=document.createElement("select");
buildDropDownBox(dropDownBox);
cell.appendChild(dropDownBox);
cell=row.insertCell(row.length);
});
$('#btn-delete-row').click(function() {
 myTable.deleteRow(mytable.rows.length-1);
});
function buildDropDownBox(select)
{
  var myobject = {
        ValueA : 'Text A',
        ValueB : 'Text B',
        ValueC : 'Text C'
    };
    for(index in myobject) {
        select.options[select.options.length] = new Option(myobject[index], index);
    }
}

如何将动态下拉列表插入动态标记？

1 个答案: