I have a Django app. On my html page I have a dropdown menu which fills from DB when you click with mouse on it:

    <script>
        $("#div_id_res_person_1").mousedown(function () {
            $("#id_res_person_1").empty();
            $("#id_res_person_1").append("<option>" + '---------' + "</option>")
            var value_1 = $("#id_report_division").val();
            var value_2 = $("#id_report_sector").val();
            var value_3 = $("#id_report_department").val();
            var url = $("#PostForm").attr("data-person-url");
            console.log("a")
            $.ajax({
                url: url,
                data: {
                'divizija': value_1,
                'sektor': value_2,
                'odjel': value_3
                },
                success: function (data) {
                    $("#id_res_person_1").html(data);
                }
            });

        });
    </script>

Console.log is added to track what is going on. When I click on the field in Chrome, dropdown opens and loads with data, first console.log. Then I select what I want. Done. So only 1 console.log in total.

When I click on the field in Firefox, on first press I get console.log, and I get second when I select. How can I prevent second mousedown when selecting data in dropdown in Firefox?