使用 javascript 附加选择选项答案

【问题标题】：appending select options with javascript使用 javascript 附加选择选项
【发布时间】：2011-10-24 10:42:44
【问题描述】：

我目前有一个空的下拉列表，我想用我使用 javascript 从我的数据库中获取的一些数据来填充它。
我真的不知道该怎么做，所以现在我正在尝试这个。
带有 JQuery 的 Javascript。

for (var i=0;i<data.length;i++)
  {
  var code$=data[i].String1;
  var desc$=data[i].Code_Description;
  var str$=$('<option value='+code$+'>'+desc$+'</option>');
  option$.append(str$);
  }
   $('#offCode').html(option$);

我也试过

$('#offCode').append(option$);

但这些都不起作用

谢谢

【问题讨论】：

我们不知道option$ 和data 是什么，所以很难回答。
你需要发布更多代码和 HTML
option$是什么变量？
完全使用 php，而不是 js。
如果选项是在客户端动态添加的，则无法使用 php 执行此操作...

标签： javascript jquery dynamic drop-down-menu append

【解决方案1】：

尝试使用类似的东西：

for (var i=0;i<data.length;i++) {
      var code$=data[i].String1;
      var desc$=data[i].Code_Description;
      $('<option value='+code$+'>'+desc$+'</option>').appendTo($('#idOfSelectElement'));
}

显然，上述内容依赖于从您的 ajax/数据库调用中正确检索和填充的变量。

【讨论】：

【解决方案2】：

append() 将选项元素直接添加到<select>

您无法从代码 sn-p 中分辨出 option$ 是什么，但 append 将参数作为子元素插入。看起来你是 append'ing 一个元素的所有选项，然后 append'ing 那个元素到一个选择，这是行不通的。

【讨论】：

【解决方案3】：

以下解决方案大致基于您问题中提供的信息。由于未披露代码的全部范围，某些项目可能不适用。因此，该解决方案稍作修改，但您应该能够轻松修改它以满足您的需求。

HTML：

<select></select>
<br />
<h1>Your select box options code:</h1>
<div id="code"></div>

JavaScript：

var data = {"info":[{"String1":"string-value1","Code_Description":"description1"},{"String1":"string-value2","Code_Description":"description2"},{"String1":"string-value3","Code_Description":"description3"},{"String1":"string-value4","Code_Description":"description4"}]};

data = data.info;

for (var i=0;i<data.length;i++){
    var e = data[i];
    var code = e.String1;   
    var desc = e.Code_Description;   
    var str =('<option value="'+code+'">'+desc+'</option>');
    $("select").append(str); 
} 

$("#code").text($("select").html());

工作示例：http://jsfiddle.net/nAPDq/

【讨论】：

【解决方案4】：

$("<option value='abc'>Whatever Text</option>").appendTo($('select'));

【讨论】：