自动填充选择框答案

【问题标题】：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

【问题讨论】：

标签： javascript jquery html-select

【解决方案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

一个重要提示

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

相关参考文献：

【讨论】：