单击目录编号编辑项目

好吧，我已经大致模拟了您使用ajax请求的场景，最终向您展示了一个可能的解决方案，以解决您的问题。

来自我的测试服务器的json数据(http://dfjb.webcindario.com/getAllCollectables.php?action=all)是：

[
    {
        "collectableId": 1,
        "itemCatalogNumber": 150,
        "itemName": "name...",
        "category": {
            "categoryType": "category Type..."
        },
        "itemDescription": "item desc...",
        "itemAge": 29,
        "condition": {
            "conditionName": "condition Name..."
        },
        "sold": 10,
        "colors": [
            {
                "name": "Red"
            },
            {
                "name": "Blue"
            }
        ],
        "keywords": [
            {
                "keywordName": "keywordName 1"
            },
            {
                "keywordName": "keywordName 2"
            }
        ]
    },
    {
        "collectableId": 2,
        "itemCatalogNumber": 151,
        "itemName": "name 2...",
        "category": {
            "categoryType": "category Type..."
        },
        "itemDescription": "item desc 2...",
        "itemAge": 30,
        "condition": {
            "conditionName": "condition Name..."
        },
        "sold": 15,
        "colors": [
            {
                "name": "Green"
            },
            {
                "name": "White"
            },
            {
                "name": "Brown"
            }
        ],
        "keywords": [
            {
                "keywordName": "keywordName 1"
            },
            {
                "keywordName": "keywordName 2"
            }
        ]
    }
]

为了用所选数据打开模态，我在网格中添加了以下代码：

<a class="openModal" href="#updateModal" data-toggle="modal" data-id="' + item.itemCatalogNumber + '">' + item.itemCatalogNumber + '</a>

其中：

data-id包含网格中当前所选项目的itemCatalogNumber编号。

在这个解决方案中，我使用以下内容：

1. Array.prototype.filter（）。-过滤给定值的数据。(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
2. jQuery 1.11.1
3. Twitter引导程序3.3.5

$(function() {
  var data = []; // Declare an array to store the json data from server.
  function loadCollectionIndex() {
    $.ajax({
      url: 'http://dfjb.webcindario.com/getAllCollectables.php?action=all',
      method: 'GET',
      dataType: "json"
    }).then(function(items) {
      data = items; // Set the data variable with the current response from the server.
      var tbody = $('tbody');
      for (var i = 0; i < items.length; i++) {
        var item = items[i];
        var colorString = '';
        var keywordString = '';
        item.colors.forEach(function(value, index, color) {
          if (index == (color.length - 1)) {
            colorString += value.name;
          } else {
            colorString += value.name + ', ';
          }
        });
        item.keywords.forEach(function(value, index, keyword) {
          if (index == (keyword.length - 1)) {
            keywordString += value.keywordName;
          } else {
            keywordString += value.keywordName + ', ';
          }
        });
        tbody.append('<tr id="itemCatalogNumberRow" class="newRow"><td class="itemCatalogNumber"><a class="openModal" href="#updateModal" data-toggle="modal" data-id="' + item.itemCatalogNumber + '">' + item.itemCatalogNumber + '</a></td><td class="itemName">' + item.itemName + '</td><td class="itemCategory">' + item.category.categoryType + '</td><td class="itemDescription">' + item.itemDescription + '</td><td class="itemAge">' + item.itemAge + '</td><td class="itemCondition">' + item.condition.conditionName + '</td><td class="itemColor">' + colorString + '</td><td class="itemKeyword">' + keywordString + '</td><td class="itemSold">' + item.sold + '</td></tr>');
      }
    });
  }
  loadCollectionIndex();
  // When the user clicks in the link, open the modal and show the current data.
  $(document).on("click", ".openModal", function() {
    var id = parseInt($(this).data("id"), 10); // Gets the data-id value (itemCatalogNumber).
    console.log(id);
    var result = {}; // Declare an object to store the current object to populate in the modal form.
    result = data.filter(function(x) {
      return x.itemCatalogNumber === id; // From the array, only return an object which matches with the criteria.
    })[0];
    console.log(result); // Show the object in the console.
    /*
      Set the values from the result object in every field in the form.
     */
    $("#updateCollectableSelect").append('<option value=' + result.collectableId + '>' + result.itemName + '</option>');
    $("#updateIdNum").text(result.collectableId);
    $("#updateItemCatalogNumber").val(result.itemCatalogNumber);
    $("#updateItemName").val(result.itemName);
    $("#updateItemAge").val(result.itemAge);
    $("#updateItemDescription").val(result.itemDescription);
    $("#addCatagorySelect").html('<option class="" value="select">Select Category</option>');
    $("#addCatagorySelect").append("<option value=" + result.category.categoryType + ">" + result.category.categoryType + "</option>");
    $("#addConditionSelect").html('<option class="" value="select">Select Condition</option>');
    $("#addConditionSelect").append("<option value=" + result.condition.conditionName + ">" + result.condition.conditionName + "</option>");
    $("#addColorSelect").html('<option class="" value="select">Select Color</option>');
    // Fills colors in the <select> tag.
    for (var i = 0; i < result.colors.length; i++) {
      $("#addColorSelect").append("<option value=" + result.colors[i].name + ">" + result.colors[i].name + "</option>");
    }
    $("#addKeywordSelect").html('<option class="" value="select">Select Keyword</option>');
    // Fills keywords in the <select> tag.
    for (i = 0; i < result.colors.length; i++) {
      $("#addKeywordSelect").append("<option value=" + result.keywords[i].keywordName + ">" + result.keywords[i].keywordName + "</option>");
    }
  });
});

<html>
<head>
  <meta charset="utf-8" />
  <title>Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
  <div>
    <table border="1" class="table">
      <thead>
        <tr>
          <th>Catalog Number</th>
          <th>Name</th>
          <th>Category Type</th>
          <th>Item Description</th>
          <th>Item Age</th>
          <th>Condition Name</th>
          <th>Colors</th>
          <th>Keywords</th>
          <th>Sold</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div>
    <!-- Modal -->
    <div id="updateModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"> Add an Item </h4>
          </div>
          <div class="modal-body">
            <div id="updateItem">
              <form>
                <select name="dropDownMenu" id="updateCollectableSelect">
                  <option value="Select a Collectable">Select a Collectable</option>
                </select>
                <div>
                  <label>ID Number</label>
                  <br>
                  <span id="updateIdNum"></span>
                  <br>
                </div>
                <br>
                <div>
                  <label>Catalog Number</label>
                  <input type="text" id="updateItemCatalogNumber">
                  <p class="error" id="updateItemCatalogNumberError"></p>
                  <br>
                </div>
                <br>
                <div>
                  <label>Collectable Name</label>
                  <input type="text" id="updateItemName">
                  <p class="error" id="updateItemNameError"></p>
                  <br>
                </div>
                <br>
                <div>
                  <label>Collectable Age</label>
                  <input type="text" id="updateItemAge">
                  <p class="error" id="updateItemAgeError"></p>
                  <br>
                </div>
                <br>
                <div>
                  <label>Collectable Description</label>
                  <input type="text" id="updateItemDescription">
                  <p class="error" id="updateItemDescriptionError"></p>
                  <br>
                </div>
                <br>
                <div id="categorySelectDiv">
                  <select id="addCatagorySelect" class="" name="catagorySelect">
                    <option class="" value="select">Select Category</option>
                  </select>
                  <br>
                </div>
                <br>
                <div id="conditionSelectDiv">
                  <select id="addConditionSelect" class="" name="conditionSelect">
                    <option class="" value="select">Select Condition</option>
                  </select>
                  <br>
                </div>
                <br>
                <div id="addColorDiv">
                  <div id="colorSelectDiv">
                    <select id="addColorSelect" class="" name="colorSelect" multiple>
                      <option class="" value="select">Select Color</option>
                    </select>
                    <br>
                  </div>
                  <div>
                    <p>Hold down the Ctrl button to select multiple color options.</p>
                  </div>
                  <div id="addKeywordDiv">
                    <div id="keywordSelectDiv">
                      <select id="addKeywordSelect" class="" name="keywordSelect" multiple>
                        <option class="" value="select">Select Keyword</option>
                      </select>
                    </div>
                    <div>
                      <p>Hold down the Ctrl button to select multiple keyword options.</p>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-default" data-dismiss="modal">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

希望这对你有所帮助。

无论如何，当您调用getAllCollectables/all时，如果您从服务器向我们提供json数据，那将非常有用。