根据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请求的更改函数。有很多方法可以将其全球化，因此您不必每次都创建新的更改功能。你可能会将必要的信息存储在一个全局变量中，并在变量函数中引用该变量，或者我相信你可以做一些其他非常酷的示波器技巧，但那将是简单表。