Javascript 三个具有公共类的select元素的onChange（）事件被激发两次

在我的应用程序的主页上，我为电影卡的“过滤器”选择了三个元素。它们共享公共类名，onChange事件通过jQuery绑定到它。当我选择任何选项时，它都会正确地激发和执行函数。但当我移除相同的过滤器（将值更改为“无”）时，事件会触发两次，显示两组卡片。我怎样才能防止这种情况

HTML:

我还尝试使用仅绑定到表单的类名，而不是所有select元素。它的工作原理完全相同

---

我想看看getData。如果删除此项，则事件将火热一次：嗨，感谢@Selva的努力。请参考编辑。它调用SpringREST方法，该方法收集数据库中所有电影的信息并将其发送回数据库。

<form class="show-filter">
        <div class="row">
        <div class="form-group col-md-2">
          <label for="language">Language</label>
          <select id="language" class="form-control filter">
            <option value="none" selected>Any</option>
            <option value="Hindi">Hindi</option>
            <option value="English">English</option>
          </select>
        </div>
        <div class="form-group col-md-2">
          <label for="format">Format</label>
          <select id="format" class="form-control filter">
            <option value="none" selected>Any</option>
            <option value="2D">2D</option>
            <option value="3D">3D</option>
            <option value="iMax">iMax</option>
          </select>
        </div>
        <div class="form-group col-md-2">
          <label for="genre">Genre</label>
          <select id="genre" class="form-control filter">
            <option value="none" selected>Any</option>
            <option value="Action">Action</option>
            <option value="Horror">Horror</option>
            <option value="Fantacy">Fantacy</option>
            <option value="Crime">Crime</option>
            <option value="Comedy">Comedy</option>
            <option value="Biopic">Biopic</option>
          </select>
        </div>
      </div>
    </form>

var language="none";
        var format="none";
        var genre="none";

        $(".filter").on("change",function(e){
        
        document.getElementById("movie-cards").innerHTML=''; 
             if(e.target.id==="genre")
             genre=e.target.value;
             else  if(e.target.id==="language")
             language=e.target.value;
             else  if(e.target.id==="format")
             format=e.target.value;
             getData(language,format,genre); //function takes filter params and returns data for movie-cards.
         });

const getData = (language,format,genre) => {
    var url="http://localhost:8080?language="+language+"&format="+format+"&genre="+genre;
    sendHttpRequest('GET', url).then(responseData => {
      createMovieCards(responseData)
    });
  };