Question

我正在尝试为在线游戏社区编写实用程序代码。用例是

任何船体（容器）都可以容纳4种固定类型的0到6个（槽）。每个船体都有盔甲，武器，盾牌特殊slots。槽的组合根据船体类型而变化。

我想要实现的模型看起来像 - ＆gt;

 only 1 Container(hull)  having ... 
     Armour 
       Armour 1   - <select>
                     <option 1>
                     <option 2>
                     <option x>
                      </select>

                      ...up to

       Armour 6  - <select>
                      <option 1>
                      <option 2>
                      <option x>
                      </select>   
-------
    Weapon
        Weapon 1    -<select>
                       <option 1>
                       <option 2>
                       <option x>
                       </select>  

                        ...  

        Weapon 2          -<select>
                       <option 1>
                       <option 2>
                       <option x>
                       </select>

＆amp; etc用于其他两种类型（盾牌和特殊）

＆＃34;选项＆＃34;对于每种类型存储在数据库中，我已经在PHP脚本中编写了必要的查询。但是，添加这些（通过$ .ajax或者不是）会很麻烦。

我的问题是......如何附加＆＃39;选项＆＃39;到每种类型的x选择？每种类型（护甲，武器，盾牌，特殊）的选项都不同，我只知道在选择了船体类型后每种类型有多少。

我尝试过以下（摘录）....但没有成功。请大家这里的一位大师建议怎么做......我非常感谢设计方面的帮助您会注意到我使用了JFactory，因为整个模块都包含在Joomla中！到目前为止，这是我的代码。希望命名约定不会太远！

*/ This is php to create the starting point, the hull.

<php
$hull_sql="SELECT DISTINCT pk,ship_hull FROM ship_hulls";
$db->setQuery($hull_sql);
$results=$db->loadObjectList(); 

echo "<br />Hull: <select id=\"hull".$x."\" onchange=\"getHull(this)\">"; 
       foreach($results as $row) {
        echo"<option value=".$row->pk.">".$row->ship_hull."</option>";}

/ *下面的表格显示了用户所选船体的插槽数量可用* /

echo"</select>

<table id=\"slotDataTable\">
 <tr>
    <th>Armour Slots</th>
    <th>Shield Slots</th>
    <th>Weapon Slots</th>
    <th>Special Slots</th>
 </tr>
 <tr>
    <td id=\"armour\" </td>
    <td id=\"shield\" </td>
    <td id=\"weapon\" </td>
    <td id=\"special\" </td>
</tr>
</table>";

/* this table where the Type selectors are presented */
echo "
<table><td id=\"ArmourData\"></td></tr></table>
<table><td id=\"ShieldData\"></td></tr></table></tr></table>
<table><td id=\"WeaponData\"> </td></tr></table>
<table><td id=\"SpecialData\"> </td></tr></table>";

*/ This is the jquery to make the relevent number of slots */

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function getHull(element){
$.ajax({
type: "POST",
url: "http://<mydomian>/get_levels.php",
data:{H:element.value},
success:(function (data_in) 
{
     drawTable(data_in);
})
});
}  
*/ This draws the relevant number of slots    

function drawTable(data_in) {
obj = $.parseJSON(data_in);
for (var i = 0; i < obj.length; i++) {
$("#armour").text(obj[i].armour);
$("#shield").text(obj[i].shield);
$("#weapon").text(obj[i].weapon);
$("#special").text(obj[i].special);
var a=obj[i].armour;
var sh=obj[i].shield;
var w=obj[i].weapon;
var sp=obj[i].special;

}
draw_armour(a);
draw_shield(sh);
draw_weapon(w);
draw_special(sp);
}

function draw_armour(slots){
$('#ArmourData').append("Armour Slot :"+ num+ "&nbsp");   
 // Set options

//这就是我被卡住的地方!!!

 $.getJSON("http://<mydomain>/get_options.php",{action:getArmour},          
 function (data)
 {
    obj=$.parseJSON(data);
    var html = '<select id=armour'+ num + '>';
    for (var o = 0; o < obj.length; o++) {
    html += '<option value="' + obj[o].value + '">' + obj[o].label + '</option>';
         }
   html +='</select>';
   $('#armour_select' + num).append(html); 
   });
  }

请建议填写选项的最佳方法！提前谢谢了！

Answer 1

我立即看到一个问题，因为您正在使用$ .getJSON方法，当响应传递到您的回调函数时，响应已经转换为JSON对象。删除$ .parseJSON调用并按原样处理响应参数，如果剩下的逻辑是合理的，它应该可以工作。

我注意到的另一个项目是将下拉选项插入表格的代码。您正在使用jQuery文本函数，该函数基本上在循环中每次迭代时替换目标容器内容。尝试使用append方法，如下所示：

$('#targetId').append(newHtml);

附加n个选项以确定<select> </select>的数量

1 个答案: