My script is working in firefox and not working in chrome

My script is working in firefox and not working in chrome

Hi,

I have this script working in firefox, but it's not working in chrome, I added this script before </body> directly, what should i do????

<script>
    // Select City   
    $(document).ready(function () {       
        $('option[value="alexandria"]').click(function () {
            $("#city_service").html('<a class="dropdown-item text_right" href="#" onclick="myService_alex1()">خدمة (1)</a><a class="dropdown-item text_right" href="#" onclick="myService_alex2()">خدمة (2)</a><a class="dropdown-item text_right" href="#" onclick="myService_alex3()">خدمة (3)</a>');
        });

        $('option[value="minya"]').click(function () {
            $("#city_service").html('<a class="dropdown-item text_right" href="#" onclick="myService_minya1()">خدمة (4)</a><a class="dropdown-item text_right" href="#" onclick="myService_minya2()">خدمة (5)</a>');
        });
    });

    // Select Service
    function myService_alex1() {
        $('#recommend_alex1').show();
        $(".recommendation").not("#recommend_alex1").hide();
        $("#recommendations").css("margin-bottom", "51px");
    }
    function myService_alex2() {
        $('#recommend_alex2').show();
        $(".recommendation").not("#recommend_alex2").hide();
        $("#recommendations").css("margin-bottom", "51px");
    }
    function myService_alex3() {
        $('#recommend_alex3').show();
        $(".recommendation").not("#recommend_alex3").hide();
        $("#recommendations").css("margin-bottom", "51px");
    }

    function myService_minya1() {
        $('#recommend_minya1').show();
        $(".recommendation").not("#recommend_minya1").hide();
        $("#recommendations").css("margin-bottom", "51px");
    }
    function myService_minya2() {
        $('#recommend_minya2').show();
        $(".recommendation").not("#recommend_minya2").hide();
        $("#recommendations").css("margin-bottom", "51px");
    }
</script> 



Thanks in advance