Auto populate select box

Question

I am trying to auto populate a select box using Jquery and JavaScript.

I done some searching and came across this question and followed the advice of the selected answer.

I originally set up a jsFiddle to illustrate my problem: http://jsfiddle.net/GJdBR/

After receiving some advice on answers below I created a new jsfiddle and it worked. http://jsfiddle.net/2UbqP/

However, on my computer I am using a clean install of windows 7, all I have done so far, is install chrome, apanta and xampp. I go to localhost/website and the site comes up, however the js functionality doesn't work, the select box isn't being filled with the var even though I proved the code is correct because of the jsfiddle above.

I am getting an error on this:

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

The error reads:

Uncaught SyntaxError: Unexpected token ILLEGAL

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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

You've tried

$.each(translationOptions, (value) )

it's wrong, because correct structure is $.each(mapData, callbackFunction), here mapData means Object or Array.

And next issue is:

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

It should ne

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

Mind that, populateTranslationOptions doesn't call a function, so to call a function you need to populateTranslationOptions().

DEMO

One important note

The () after a function means to execute the function itself and return it's value. Without it you simply have the function, which can be useful to pass around as a callback.

Related refs:

score 1 · Accepted Answer · answered Jun 03 '12 at 18:21

1

You have several problems in your code. check this

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();
 });

Problems in your code:

$.each syntax is wrong

$.each(translationOptions (value)) {

Should be

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

You were not calling the function populateTranslationOptions; doesnt call the function populateTranslationOptions(); does.

Working Fiddle

answered Jun 03 '12 at 18:21

Prasenjit Kumar Nag

13,391
3
45
57

The page at https://127.0.0.1/Sites/Personal%20Website/fun-translator.php ran insecure content from http://code.jquery.com/jquery-latest.min.js. Uncaught SyntaxError: Unexpected token ILLEGAL funtranslator.js:14 – RSM Jun 07 '12 at 18:26
What do you have in your funtranslator.js line 14? – Prasenjit Kumar Nag Jun 08 '12 at 02:19
the javascript found in the jsfiddle – RSM Jun 08 '12 at 17:18
The same code is working fine here, http://joynag.net/demos/fun/ , Can you copy the source of that page into `fun-translator.php` and check if it's working for you? – Prasenjit Kumar Nag Jun 08 '12 at 18:24
it works if i upload it which is why in the question i wondered if it was something about my xammp install – RSM Jun 08 '12 at 19:05
In the end i just remade the file. Thanks for all your help. am awarding you the bounty as you helped most. – RSM Jun 08 '12 at 20:15

score 1 · Answer 3 · answered Jun 03 '12 at 18:29

For arrays, $.each is unnecessary. You can use a simple loop rather. Like as follows -

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();
 });

Auto populate select box

3 Answers3

One important note

Linked