JQuery: Loading data from database and inserting it to select

Question

I've three selects, which looks like this:

<select name="nick">
<?php foreach ($chars as $char):?>
<option value='<?php echo $char['name'] ?>'><?php echo $char['name'] ?></option>
<?php endforeach; ?>
</select>
<select name='faction' disabled>
<option value='ally'>Alliance</option>
<option value='horde'>Horde</option>
</select>
<select name='class' id="class" disabled>
<option value='1'>Warrior</option>
<option value='2'>Paladin</option>
<option value='3'>Hunter</option>
<option value='4'>Rogue</option>
<option value='5'>Priest</option>
<option value='6'>Death Knight</option>
<option value='7'>Shaman</option>
<option value='8'>Mage</option>
<option value='9'>Warlock</option>
<option value='10'>Druid</option>
</select>

$chars:

$chars = array(0 => array("name" => "Solock",
                          "level" => "80",
                          "class" => "9"),
               1 => array("name" => "Emmorts",
                          "level" => "80",
                          "class" => "3"),
               2 => array("name" => "Ghom",
                          "level" => "80",
                          "class" => "2"),
);
$json = json_encode($chars);

JSON array:

[
{"name":"Solock","level":"80","class":"9"},
{"name":"Emmorts","level":"80","class":"3"},
{"name":"Ghom","level":"80","class":"2"}
]

JSON object:

{
"0":{"name":"Solock","level":"80","class":"9"},
"1":{"name":"Emmorts","level":"80","class":"3"},
"2":{"name":"Ghom","level":"80","class":"2"}
}

Is it possible, to everytime when I change [name=nick] option, other selects would select with the data from JSON object or array (if I choose "Ghom", it'd select Alliance, and Death knight)? How?

Thank you.

Your select elements are nick, faction and class, but the JSON string contains information about the nick, level and class? — Šime Vidas
– Šime Vidas, Commented Jan 2, 2011 at 18:40

Šime Vidas · Accepted Answer · 2011-01-02 18:03:41Z

1

First - on the server and based on the database entries - create a JSON string:

{
    "Solock": ["ally", "9"],
    "Emmorts": ["ally", "3"],
    "Ghom": ["ally", "6"]
}

Next, on the client, load that JSON string into a JavaScript object. Now, you can use jQuery and that object:

var $selectNick = $('select[name=nick]'),
    $selectFaction = $('select[name=faction]'),
    $selectClass = $('select[name=class]');

$selectNick.change(function() {
    var value = this.value;
    $selectFaction.val( json[value][0] );
    $selectClass.val( json[value][1] );
});

(Here, the json variable is the object created from the JSON string.)

Working demo: http://jsfiddle.net/tgeVh/

edited Jan 2, 2011 at 18:03

answered Jan 2, 2011 at 17:52

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Tom Over a year ago

How do I create a JSON string? :)

Šime Vidas Over a year ago

@Tom You use PHP to read the database and create a string. I cannot help you with that since I don't know PHP and/or mySQL. You may ask another question...

Tom Over a year ago

I've updated my question, could you add a jsfiddle demo with my JSON string structure? Thank you

Kyle Over a year ago

The JSON string in the demo does not match what is in the edited question. Either the PHP code will need to be changed to index by the name, as in the demo, or the HTML/JavaScript will need to be changed to select the Nth subset of the JS object.

Šime Vidas Over a year ago

@Kyle Yes, I can write a transformation function which transforms the original object into the form that I use. But first the OP has to clarify if he needs the faction or level information...

Kyle · Accepted Answer · 2011-01-02 17:55:08Z

1

This is possible. I recommend that you check out the json_encode() PHP function. You should be able to use that function to encode the $chars variable into JSON. You can then use the parseJSON method of jQuery to create a JavaScript object based on the JSON string.

If you do not need to use $char['name'] as the value for the select, then you might want to consider using indices (beginning at 0) to easily reference the JavaScript object with.

answered Jan 2, 2011 at 17:55

Kyle

2,8922 gold badges20 silver badges25 bronze badges

Collectives™ on Stack Overflow

JQuery: Loading data from database and inserting it to select

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related