Question

我有一个类似的json数据，

 [
    {
        "metalTypeId": 1,
        "metalTypeName": "copper"
    },
    {
        "metalTypeId": 3,
        "metalTypeName": "steel"
    }
]

我的html结构如下：

 <table id="lineItemTable">
 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>

 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>
 </table>

我想要做的是当用户选择下拉列表中的一个选项时，我想将相应的json数据填充到我的p中的td标记中。我的表包含两个相同的行。

因此，例如，如果用户为第一个表行选择铜，并为第二个表行选择钢，则相应的p将填充文本＆＃34; 1＆＃34;和＆＃34; 3＆＃34;到html页面。如果用户未选择这两行，则只有选定的行会将相应的数据填充到p标记。

我对jQuery很绿，所以我写了一些js代码，但它没有按预期工作：存储json数据的变量名为jasonData：

$('select').on('change', function (e){

           $.each(jasonData, function(i, v) {
                if (jasonData.metalTypeName == $('select').val()) {
                           $('p').text(v.metalTypeId);
                           return;
                }
           }); //end each()

});  // end on()

通过查看我的代码我已经知道一个问题，p和select选择了两个表行字段，但我不知道如何正确修复它。代码可能有其他问题，请咨询。

Answer 1

您的代码非常接近工作。您只需在触发select事件时缓存活动change，以便稍后引用它;比较each中的活动对象（您错误地引用了整个数组）;并使用一些选择器来找到正确的段落。但是，您可能需要考虑使用更接近David的答案。它比这种方法更清洁。

＆＃13;

var jasonData = [
  {
    "metalTypeId": 1,
    "metalTypeName": "copper"
  },
  {
    "metalTypeId": 3,
    "metalTypeName": "steel"
  }
];

$('select').on('change', function (e){
  var selected = this;
  $.each(jasonData, function(i, v) {
    if (v.metalTypeName === selected.value) {
      $(selected).closest('.row_to_clone').find('p').text(v.metalTypeId);
      return;
    }
  }); //end each()
});  // end on()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="lineItemTable">
 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>

 <tr class="row_to_clone">
     <td>
          <select>
              <option>Select One Option</option>
              <option>copper</option>
              <option>steel</option>
          </select>
      </td>

      <td>
          <p></p>
      </td>
 </tr>
 </table>

＆＃13;

Answer 2

我真的建议你不要使用像“select”和“p”这样一般的选择器;当你扩展你的代码时，你会因为这些如此普遍而陷入问题;我建议您使用一些课程来帮助您或ID。另外，如果你可以改变那个JSON的结构，你不需要每个都这样做，基本上当你可以更容易的时候，你就会在那里强迫出现O（n）问题。这是我为您编写的一个示例，用于执行您想要的功能

Pro Git book

现在，如果您想更轻松地选择结果，可以尝试以下

//Rename this variable better IE jsonData;
var jasonData = {"copper": { "metalTypeId": 1,"metalTypeName": "copper"}, "steel": {"metalTypeId": 3,"metalTypeName": "steel"}};
//Now the selector could be something like
$('.metalSelector').on('change', function (e){
     var value = $(this).val();
     $('#result').text(jasonData[value].metalTypeId);
});

那很简单！

使用jquery动态填充用户输入相应的json数据

2 个答案: