Question

您好我正在使用此代码

<div id="inputList">
  <script type="text/javascript">
    function initialize() {
      var input = document.getElementById('inputList').getElementsByClassName("searchTextField")[0];
      var autocomplete = new google.maps.places.Autocomplete(input);
      google.maps.event.addListener(autocomplete, 'place_changed', function () {
          var place = autocomplete.getPlace();
          document.getElementById('city1').value = place.name;
          document.getElementById('cityLat1').value = place.geometry.location.lat();
          document.getElementById('cityLng1').value = place.geometry.location.lng();
      });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
  </script>

  <input class="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
  <input class="city" id="city1" name="city1" />
  <input class="cityLat" id="cityLat1" name="cityLat" />
  <input class="cityLng" id="cityLng1" name="cityLng" />


 <!--  What to put here?
 <script type="text/javascript">
     ('#addLocation').click(function() {
         ('#inputList').append('??');
     });
 </script> 
 -->


 <br>
 <input type="button" value="Add New Location" id="addLocation" />
</div>

利用Google自动填充功能填充某个位置的Lat / Lng字段。这部分效果很好，但我希望能够在按下添加位置按钮后添加其他相同的输入字段。无法弄清楚如何添加它们（要传递哪些参数来追加）。有一些基本知识，但不太熟悉HTML和Javascript，任何帮助表示赞赏

Answer 1

我注意到的第一件事是您没有使用document.getElementById（'addLocation'），如果没有一些脚本，则需要（如果我错了，请更正）。

接下来就是你在这里使用JQuery方法。你有jquery吗？

这可能是你的问题。

如果包含它，请确保它在脚本之前就行了。

希望这有帮助！

Answer 2

您可以将inputItem放在div中，然后使用jquery clone()函数对它们进行复制。这是HTML：

<form id="dataForm">
    <input class="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on" runat="server" />
    <div id="listFields1">
        <input class="city" id="city1" name="city1" />
        <input class="cityLat" id="cityLat1" name="cityLat" />
        <input class="cityLng" id="cityLng1" name="cityLng" />
    </div>
</form>
<input type="button" value="Add New Location" id="addLocation" />

正如你所看到的，我把所有内容放在一个表单中，然后我将你的输入放在一个名为listFields1的div中，我们将克隆然后附加到你的表单，但在我们改变（增加）克隆列表id之前

$('#addLocation').click(function() {
    // get the last cloned list"
    var list = $('div[id^="listFields"]:last');
    // add 1 to the last number we have on the last listField id
    var num = parseInt( list.prop("id").match(/\d+/g), 10 ) +1;
    // clone the new list to the form
    var newList = list.clone().prop('id', 'listFields'+num ).appendTo( "#dataForm" );;

})

您还必须更改所有ID的增量，例如city，cityLat和cityLng，就像我对全局列表所做的那样。

这里有工作JSfiddle

在HTML

2 个答案: