I've been searching and reading for a while now, and I'm just not grasping what I'm missing. I'm hoping you can help.
I've got a JSON data structure that contains two arrays: the first is a list of clients, and the second is a list of 'affected' clients:
var data = {
allClients: [
{clientId: 1, clientName: "Client One"},
{clientId: 2, clientName: "Client Two"},
{clientId: 3, clientName: "Client Three"},
{clientId: 4, clientName: "Client Four"},
{clientId: 5, clientName: "Client Five"},
{clientId: 6, clientName: "Client Six"},
{clientId: 7, clientName: "Client Seven"},
{clientId: 8, clientName: "Client Eight"}
],
clientsAffected: [ 1, 2, 5, 8 ]
};
I am using a simple jsRender template to create a select box, using the allClients array :
<script id="tmpl" type="text/x-jquery-tmpl">
<select name="clients" id="clients" style="150px;" size=10 multiple>
{{for allClients}}
<option value="{{:clientId}}">{{:clientId}} - {{:clientName}}</option>
{{/for}}
</select>
</script>
This is working fine... produces a simple select box.
What I am trying to do (unsuccessfully) is to add a 'selected' attribute to the option that is rendered, so that in my example options 1, 2, 5, and 8 from clientsAffected are selected when the control is generated. I've been attempting to put another loop inside of the existing one, to iterate over the clientsAffected array and compare one value to the other, but I'm not having any success.
Has anyone done this before, or can you point me to a good document that describes what I need?
I've created a jsFiddle that represents what I have working: http://jsfiddle.net/LcSn7/17/
and one that is not that hopefully shows the direction I'm trying to go: http://jsfiddle.net/LcSn7/19/
Thanks in advance!
-Tim