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）您的success: function (data) {中的数据变量未被使用。我假设你的意思是它被用于严格意义上的，很可能像 var rigdetaillist = data['rigdetaillist'];那样取决于你的JSON。在任何一种情况下，数据都是你的json返回值，你根本就没有引用它......你可能需要它。： - ）

（2）正如我之前所说，你想做尽可能少的DOM操作。因此，您可能希望提取#rig并将其缓存在javascript中（稍后将重新放入DOM），或创建新的$(<script>) obj，然后将其html复制到$('#rig')'当你完成时。我建议创建新的脚本标记，因为分离是jquery的一个非常好的功能，但可能有它的问题（例如当你将它追加回来时，它会附加在容器的底部，而不是你原来的地方）。

（3）正在为每个json请求创建更改功能。很可能有一种全球化的方法，因此您不必每次都创建新的更改功能。你可以将必要的信息存储在一个全局变量中，只是在变量函数中引用该变量，或者我确定你可以做一些其他非常酷的范围技巧，但那将是简单化。

根据JSON中的选择值填充多个字段

1 个答案: