Question

我正在尝试使用Jquery和JavaScript自动填充选择框。

我做了一些搜索并遇到this question，并按照所选答案的建议。

我最初设置了一个jsFiddle来说明我的问题：http://jsfiddle.net/GJdBR/

在收到以下答案的一些建议后，我创建了一个新的jsfiddle并且它有效。 http://jsfiddle.net/2UbqP/

然而，在我的电脑上，我使用的是干净安装的Windows 7，到目前为止我所做的一切，都是安装chrome，apanta和xampp。我转到localhost / website并且站点出现，但是js功能不起作用，即使我证明代码是正确的，因为上面的jsfiddle，选择框没有填充var。

我收到了错误：

$(document).ready(function() {
    populateTranslationOptions();
});

错误如下：

Uncaught SyntaxError: Unexpected token ILLEGAL

Answer 1

$.each(translationOptions, function (index, value) {   
        $('#translationOptions')
            .append($("<option></option>")
            .attr("value",value)
            .text(value)); 
    });

你试过

$.each(translationOptions, (value) )

这是错误的，因为正确的结构是$.each(mapData, callbackFunction)，这里mapData表示对象或数组。

接下来的问题是：

 $(document).ready(function() {
   populateTranslationOptions;
 });

应该

$(document).ready(function() {
   populateTranslationOptions(); // you missed () here
 });

请注意，populateTranslationOptions不会调用函数，因此要调用populateTranslationOptions()所需的函数。

<强> DEMO

一个重要的注意事项

函数之后的（）意味着执行函数本身和归还它的价值。如果没有它，你只需拥有该功能即可作为回调传递有用。

相关参考：

<强> $.each()
<强> call javascript function with/without parenthesis

Answer 2

您的代码中存在多个问题。检查一下

function populateTranslationOptions ()
{
    var translationOptions = ["Egyptian Hieroglyphs", "Al Bhed (Final Fantasy X)", "Futurama"];
    $.each(translationOptions ,function(i,value) {   
        $('#translationOptions')
            .append($("<option></option>")
            .attr("value",value)
            .text(value)); 
    });
}

$(document).ready(function() {
   populateTranslationOptions();
 });

代码中的问题：

$.each语法错误

$。each（translationOptions（value））{

应该是

$.each(translationOptions ,function(i,value) {

你没有调用函数populateTranslationOptions;没有调用函数 populateTranslationOptions();确实如此。

Working Fiddle

Answer 3

对于数组，$ .each是不必要的。你可以使用一个简单的循环。如下所示 -

function populateTranslationOptions()
{
    var translationOptions = ["Egyptian Hieroglyphs", "Al Bhed (Final Fantasy X)", "Futurama"];
    for (var i = 0; i < translationOptions.length; i++) {
        $('#translationOptions')
            .append('<option value="' + translationOptions[i] + '">' + translationOptions[i] + '</option>');
    };
}

$(document).ready(function() {

   populateTranslationOptions();
 });

自动填充选择框

3 个答案:

一个重要的注意事项