Question

我正在使用JavaScript来填充HTML5页面 - 最终链接到Delphi / Datasnap页面。

在我的页面上，我有一个标签设置，提供如下列表框：

<select id="FirmList" size="10"></select>

然后我将一个JavaScript脚本链接到一个在OnClick

上触发的按钮

function getJobFirms()
{
  var sel = $("#FirmList");
  //var sel = document.getElementByID("FirmList");
  for (var i=0; i<10; i++) {
    var opt = document.createElement('option');
    opt.value = i;
    opt.text = i+1;
    sel.add(opt);
  }
}

以上似乎有效 - 因为Chrome报告没有错误并循环10次。但是，网页上的列表框中没有任何内容，并且sel.option的length属性不会增加

我试图使用其他选项，例如直接解决sel.opt而没有运气

有什么建议吗？

Answer 1

您需要使用.append()

将参数指定的内容插入匹配元素集中每个元素的末尾。

使用

sel.append(opt);

而不是

sel.add(opt);

DEMO

Answer 2

它不起作用的原因是因为sel是一个jQuery对象，并且您正在尝试使用本机select.add()方法，该方法仅适用于本机元素。

解决问题的简单方法是执行您似乎必须尝试的操作，使用getElementById，但您输错了。

function getJobFirms() {
  var sel = document.getElementById("FirmList");

  for (var i=0; i<10; i++) {
    var opt = document.createElement('option');
    opt.value = i;
    opt.text = i+1;
    sel.add(opt);
  }
}

因为你已经在使用jQuery，你可以做这样的事情

function getJobFirms() {
    $("#FirmList").append(function() {
        return $.map(' (. Y .)  '.split(''), function(_,i) {
            return $('<option />', {text : (i+1), value : i});
        });
    });
}

Answer 3

使用以下jQuery脚本

 function getJobFirms()
    {
      var sel = $("#FirmList");
      //var sel = document.getElementByID("FirmList");
      for (var i=0; i<10; i++) {
        sel.append('<option value="'+i+'">'+(i+1)+'</option>');
      }
    }

这是有效的JSFiddle

Answer 4

Demo

使用追加（）;

var sel = $("#FirmList");

  for (var i=0; i<10; i++) {
    var opt = document.createElement('option');
    opt.value = i;
    opt.text = i+1;
    sel.append(opt);
  }

或 DEMO JQUERY

var sel = $("#FirmList");

  for (var i=0; i<10; i++) {

    sel.append($('<option/>',{'text' : i+1},{"value":i}));
   //OR
    sel.append("<option value='"+i+"'>"+(i+1)+"</option>")
  }

Answer 5

由于您已经在使用jQuery，因此可以使用以下内容使其更具可读性。如其他问题所述，add不是jQuery方法，您需要使用append的任何变体。

function getJobFirms()
{
  var sel = $("#FirmList");
  for (var i=0; i<10; i++) {
    $('<option/>', {text: i + 1, value: i})
        .appendTo(sel);
  }
}

无法使用</select>播种<select>列表框

5 个答案: