Question

我尝试将值附加到SELECT框，该框会动态添加到页面的body。这里可以看到一个小提琴：https://jsfiddle.net/mr2qtmw9/

HTML：

<body>

foo bar

</body>

JS：

var countries = new Object();
countries['AT'] = "Austria";
countries['AU'] = "Australia";
countries['BE'] = "Belgium";
countries['BG'] = "Bulgaria";
countries['CA'] = "Canada";

$(document).ready(function() {

    $('body').append( "<select id='foo'></select>" );

  // fill out the country, and its selected value
  $.each(countries, function(i,x) {
    $('#Country').append($('<option>', { value : i }).text(x));
  });

});

SELECT框已创建，$ .each（）会一直运行...但该选项不会被添加。

我错过了什么？（当初始DOM上出现选择框时，相同的代码工作正常......当它动态注入时似乎有问题）

更新：抱歉，我在示例中输入了错误的ID！在实时脚本中，ID为＆＃34; Country＆＃34;，选择器为＆＃34; #Country＆＃34;。它仍然无法在我的开发服务器上工作（更复杂的代码），所以我猜问题必须在其他地方：（

更新2： Doh，这对我来说是一个很大的疏忽！（有时写作和问题可以帮助你发现这些）。我在正在执行工作的函数中放了alert()，发现它运行了2次。果然，在检查完代码之后，我发现第二个地方我正在调用相同的功能。因此，它添加了选项，但是对于SELECT的第一个实例（第二个实例重叠，所以我无法看到第一个）。

我有一半想删除这个问题，因为它让我看起来很笨......但我想我会把它留下来，所以希望它能帮助其他人避免类似的尴尬;）< / p>

Answer 1

您在选择中有foo，但在追加Country时您使用的是option。这应该有效：

＆＃13;

var countries = new Object();
countries['AT'] = "Austria";
countries['AU'] = "Australia";
countries['BE'] = "Belgium";
countries['BG'] = "Bulgaria";
countries['CA'] = "Canada";

$(document).ready(function() {

	$('body').append( "<select id='Country'></select>" );

  // fill out the country, and its selected value
  $.each(countries, function(i,x) {
    $('#Country').append($('<option>', { value : i }).text(x));
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

foo bar

</body>

＆＃13;

Answer 2

添加

时只需要将id更改为foo

var countries = new Object();
countries['AT'] = "Austria";
countries['AU'] = "Australia";
countries['BE'] = "Belgium";
countries['BG'] = "Bulgaria";
countries['CA'] = "Canada";

$(document).ready(function() {

	$('body').append( "<select id='foo'></select>" );

  // fill out the country, and its selected value
  $.each(countries, function(i,x) {
    $('#foo').append($('<option>', { value : i }).text(x));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>

foo bar

</body>

动态添加值到SELECT框，附加到正文

2 个答案: