JQuery 中的两个不同的 on.change() 事件和一个 ajax 调用

Question

我有两个内置的 python 下拉列表，我试图使用 Ajax 调用将它们链接在一起。

可以在html中看到相关代码：

<script>

        $("#id_city").change(function () { // event on the city dropdown change. 

          var cityId = $(this).val();

          $.ajax({                       // initialize an AJAX request

            url: '{% url "city_autocomplete" %}',    // set the url of the request (= localhost:5000/app/ajax/city-autocomplete/)

            data: {

              'cityId': cityId      // add the city id to the GET parameters

            },

            // dataType: 'json',

            success: function (data) {

              $('#preview').html(data); // replace the html response with the <div> content

            }

          });

          event.preventDefault();

        });

  </script>

  <script>

        $("#id_tag").change(function () {

          var tagId = $(this).val();

          $.ajax({

            url: '{% url "city_autocomplete" %}',

            data: {

              'tag': tagId

            },

            success: function (data) {

              $('#preview').html(data);

            }

          });

          event.preventDefault();

        });

  </script>

一旦我选择了城市，cityId就会获取该值但tagId不返回任何值，反之亦然。我想知道jQuery中的解决方案是什么，同时监听两个dorpdown的变化，或者让我们说如何将两个合并在一起on.change()？

Answer 1

为两个元素创建一个事件监听器<script>&nbsp; &nbsp; $("#id_tag,#id_city").change(function () {&nbsp; &nbsp; &nbsp; var tagId = $("#id_tag").val();&nbsp; &nbsp; &nbsp; var cityId = $("id_city").val();&nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; url: '{% url "city_autocomplete" %}',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'tag': tagId,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'cityId': cityId&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#preview').html(data);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; });</script>

Answer 2

// Try this script&nbsp;<script>&nbsp; &nbsp; &nbsp; &nbsp; $("#id_city, #id_tag").change(function () { // use multi selector.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var tagId = $("#id_tag").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cityId = $("id_city").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: '{% url "city_autocomplete" %}',&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'cityId': cityId&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#preview').html(data);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; </script>