根據JSON中的選擇值填充多個字段

Question

我想在用戶從選擇框中進行選擇後，用JSON數據填充多個表單域。我對jquery非常陌生，所以很抱歉，如果我得到一些基本的錯誤。我不想在我的html中包含JSON，因爲它會經常更改，而且它是一個非常大的文件。以下是我有：

<script type="text/javascript"> 

$.ajax({ 
    url: '../includes/json/data/abbc.json', 
    success: function(data) { 

    $("#rig").html("<option >--select--</option>"); 

    $.each(rigdetaillist.rigs,function(){ 
      var rigName=this.rig; 
     $("#rig").append("<option value=" +rigName + ">" +rigName + "</option>"); 
    }); 

    $("#rig").change(function(){ 
     var rigValue=$(this).val(); 
     $.each(rigdetaillist.rigs,function(i){ 
     var rigName=this.rig; 

     if (rigName==rigValue){ 
      $(".rigdetail").val(""); 
      $.each(rigdetaillist.rigs[i].rigdteails,function(i){ 
      var rigdetailName=this.rigdetail 
      $(".rigdetail").eq(i).val(rigdetailName); 
      }); 
     } 
     }); 
    }); 

    } 
}); 

</script> 

Answer 1

這裏有，你要考慮，主要的事情是，你想要做的少DOM操作，儘可能的主要原因它的一個一個的幾件事的性能問題。

不幸的是，我沒有時間重寫你的代碼，並給你你應該寫的東西。雖然我有時間向你解釋你需要考慮的事情，並希望它能引導你走上正確的道路:-)

（1）你的數據var在success: function (data) {未被使用。我假設你的意思是它被用於rigdetaillist，最有可能像var rigdetaillist = data['rigdetaillist'];取決於你的JSON。在這兩種情況下，數據都是你的json返回值，其中你根本就沒有引用......你可能需要這些。 :-)

（2）正如我剛纔所說的，你想盡可能少做DOM操作。所以你可能會想要拉出#rig並將其緩存在javascript中（稍後將放回到DOM中），或者創建一個新的obj，然後在完成後將其html複製到$('#rig')中。我建議創建新的腳本標記，因爲分離是jquery的一個非常好的功能，但可能會有問題（例如，當您將它追回時，它會追加到容器的底部，而不是原來的位置）。

（3）正在創建每個json請求的更改函數。有很多方法可以將其全球化，因此您不必每次都創建新的更改功能。你可能會將必要的信息存儲在一個全局變量中，並在變量函數中引用該變量，或者我相信你可以做一些其他非常酷的示波器技巧，但那將是簡單表。