The app I am developing creates an "Army List" of models for players to use in a miniatures game. I have worked out some of the mechanics in a simple php/jquery setup (like adding html blocks and removing them), but now I am at the stage where I am trying to populate data. I have the fixed select boxes working fine (at least they seem to be for now) but the dynamic stuff is evading me like I were the plague.

So a couple quick things about this part of the app...

To build your army list, you add models to the form - I have chosen to use select boxes for this purpose since the models really are limited to what is available in the game. A player can have any number of troops, as the limit on the size of the army is not the number of models, but the total points that all of the models in the army add up to. For example, a 1000pt Army may consist of 20 models for one "faction", but may have 35 models when created using models from another "faction" or even a different army configuration with the faction chosen for the 20 model army. Of course for any army you need a leader - which was easy to do, that leader controls the first "Troop" which is called "Troop A" in the application and is required to "build" your army. All of the other models added to the army are broken down into other "Troops", each one requiring a "leader" (which may be a Warlord, Captain, or Sergeant - some of which are unique and can only be added to the army once), and the troop can contain any number of models up to the limit of the models that can be "commanded" by the selected leader model. (15 is the max for any leader in the game at the moment.)

So the problem I am having right now is the select box generated by my javascript code populates and creates the list, but it looks like any standard dropdown - not like the rest of the dropdowns on the jQuery Mobile page. I have tried altering the jqm tags in the javascript code, but that doesn't seem to have any effect.

2. HTML CODE:
   <div data-role="content">
3. <!-- Troops/Models added to the Army -->
4. <div class="troops">
5. <div class="troop a required">
6. <legend class="troop"><div class="troop-title">Troop A </div><div class="troop-points">[000 pts]</div></legend>
7. <div><span>Leader for Troop A is the Army Leader/Warlord</span></div>
8. <form id="select-troop-models-a" method="post" name="select-troop-models-a">
9. <div data-role="fieldcontain">
10. <label for="select-troop-models-a" class="select">Model:</label>
11. <select class="bloc" name="select-troop-models-a" id="select-troop-models-a" data-native-menu="false" data-mini="true">
12. <option value="choose-one" data-placeholder="true">Choose one...</option>
13. <optgroup label="Leader Models">
14. <?= $leader_id_select ?>
15. </optgroup>
16. <optgroup label="Elite Models">
17. <?= $elite_id_select ?>
18. </optgroup>
19. <optgroup label="Solo/Monster Models">
20. <?= $solo_id_select ?>
21. </optgroup>
22. <optgroup label="Soldier Models">
23. <?= $soldier_id_select ?>
24. </optgroup>
25. </select>
26. </div><!--/data-role-fieldcontain -->
27. </form>
28. <div><input type="hidden" value="1" id="lastTroopCount" name='lastTroopCount' /></div>
29. <div><p><input id="addSlot" name="add-troop-slot" type="button" data-mini="true" value="Add Troop Slot" /></p></div>
30. </div><!-- /troop a required -->
31. </div><!-- /troops -->
32. <div><p><input id="addTroop" name="add-troop" type="button" value="Add Another Troop" /></p></div>
33. </div><!-- /data-role-content -->

All is good so far, except with the "dynamically" created "Troop" blocks, the jQuery Mobile "theme" seems to get broken when using the following method to bring those select strings into the javascript code:

2. <div id="wac-leader-select" style="display:none'">
3. <?= htmlspecialchars($leader_id_select); ?>
4. </div>
5. 
   
6. The javascript to read this is as follows:
8. var div = document.getElementById("wac-leader-select");
9. var leader_id_select = div.textContent;
11. here is the whole function routine that creates the dynamic html block:
13. $(function() {
14. $('#addTroop').click(function(e) {
15. e.preventDefault();
16. thisTroop++;
17. var thisTroopName = troops.charAt(thisTroop);
18. var div = document.getElementById("wac-leader-select");
19. var leader_id_select = div.textContent;
21. var newTroop = $(["<div class='troop " + thisTroopName + "'>",
23.     "<legend class='troop'><div class='troop-title'>Troop " + thisTroopName.toUpperCase() + " </div>", "<div class='remove-troop-button'><button name='remove-troop' class='remove-troop-button' value='troop-" + thisTroopName + "'>[remove]</button></div>", "<div class='troop-points'>[000 pts]</div></legend>", "<div class='choose-troop-leader'><span>You must choose the leader for this troop before assigning other models</span></div>", "<div class='choose-troop-model' style='display:none;'><span>You may now add up to X models to this Troop</span></div>",
24. "<form id='select-troop-models-" + thisTroopName + "' method='post' name='select-troop-models-" + thisTroopName + "'>",
25. "<div data-role='fieldcontain'>",
26. "<label for='select-troop-models-" + thisTroopName + "' class='select'>Model:</label>",
"<optgroup label='Leader Models'>" + leader_id_select + "</optgroup>",
28. "</select></form>",
29. "</div><!-- /troop block ends -->"
30. ].join("\n"));
32. $('div.troops:last').append(newTroop);
33. $('#lastTroopCount').val(thisTroop);
34. });
35. });

Placing the model string select variable in a hidden div seems to work in transferring the data string, but it does appear in the display when you select from any one of the other custom selects boxes on the main page (panel).

Any help would be appreciated! :)