自动填充选择框

Posted 2023-04-19

【中文标题】自动填充选择框

【英文标题】：Auto populate select box

【发布时间】：2012-06-03 18:17:30

【问题描述】：

我正在尝试使用 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

【参考方案1】：

您的代码中有几个问题。检查这个

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

【讨论】：

127.0.0.1/Sites/Personal%20Website/fun-translator.php 的页面运行了来自code.jquery.com/jquery-latest.min.js 的不安全内容。 Uncaught SyntaxError: Unexpected token ILLEGAL funtranslator.js:14

你的 funtranslator.js 第 14 行有什么？

在 jsfiddle 中找到的 javascript

同样的代码在这里运行良好，joynag.net/demos/fun，你能把那个页面的源代码复制到fun-translator.php 并检查它是否适合你吗？

如果我上传它就可以工作，这就是为什么在问题中我想知道这是否与我的 xammp 安装有关

【参考方案2】：

对于数组，$.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】：

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

你试过了

$.each(translationOptions, (value) )

错了，因为正确的结构是$.each(mapData, callbackFunction)，这里mapData表示Object或者Array。

下一个问题是：

 $(document).ready(function() 
   populateTranslationOptions;
 );​

应该没有

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

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

DEMO

一个重要提示

函数后面的()表示执行函数本身， 返回它的价值。没有它，您只需拥有该功能，它可以 作为回调传递很有用。

相关参考文献：

$.each()

call javascript function with/without parenthesis