動態填充用戶輸入與jQuery

Question

我有一個像這樣的JSON數據對應的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> 

我想要做的是當用戶在下拉列表中選擇其中一個選項，我想在我的td中填充相應的json數據到p標籤。而我的表格包含兩個相同的行。例如，如果用戶爲第一個表格行選擇銅，併爲第二個表格行選擇鋼材，則相應的p將向HTML頁面填充文本「1」和「3」。如果用戶不選擇兩個行，則只有選定的行將填充相應的數據到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

您的代碼非常接近工作。當您觸發change事件時，您只需要緩存活動的select，以便稍後參考;比較您的each中的活動對象（您錯誤地引用了整個數組）;並使用幾個選擇器來找到正確的段落。但是，您可能想要考慮使用更接近David的答案。這比這種方法要乾淨一些。

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()

<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>

Answer 2

我真的建議你不要使用諸如「select」和「p」等通用選擇器;當你擴展你的代碼時，你會遇到問題，因爲這些是如此普遍的;我建議你使用一些班級來幫助你或身份證。 另外，如果您可以更改該JSON的結構，則不需要每個都這樣做，基本上，當您可以更容易一些時，您就會在這裏強制執行O（n）問題。 這是我寫給你這樣做，你想

http://jsfiddle.net/6v4zzgjj/

現在的功能例如，如果你想結果的選擇更容易，你可以試試下面的

//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); 
}); 

這容易！