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>

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

      var tagId = $("#id_tag").val();

      var cityId = $("id_city").val();

      $.ajax({

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

          'tag': tagId,

          'cityId': cityId

        },

        success: function (data) {

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

        }

      });

      event.preventDefault();

    });

</script>

Answer 2

// Try this script 

<script>

        $("#id_city, #id_tag").change(function () { // use multi selector. 

          var tagId = $("#id_tag").val();

          var cityId = $("id_city").val();

          $.ajax({                      

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

            data: {

              'cityId': cityId 

            }

            dataType: 'json',

            success: function (data) {

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

            }

          });

          event.preventDefault();

        });

  </script>