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

为两个元素创建一个eventListener

<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>