Basic jQuery selector fails to function in Chrome browser

Looking for some help with a script on my website ():

$('#scheduleBox .selectCity select option').click(function() {
        var cityToShow = $(this).attr('value');
         switch(cityToShow) {
            case '0':
                $('.bucuresti, .cluj, .otopeni, .iasi').show();
                break;   
            case '1':
                $('.cluj, .otopeni, .iasi').hide();
                $('.bucuresti').show();
                break;
            case '2':
                $('.cluj, .bucuresti, .iasi').hide();
                $('.otopeni').show();
                break;
            case '3':
                $('.bucuresti, .otopeni, .iasi').hide();
                $('.cluj').show();
                break;
            case '4':
                $('.bucuresti, .otopeni, .cluj').hide();
                $('.iasi').show();
                break;
        };
    });

This code should show or hide different activities based on the selected city. It's working in Firefox but having issues in Chrome.

The actual script can be found in gears.js file.

Any assistance would be greatly appreciated!

javascriptgoogle-chromefirefox

Answer №1

$('#scheduleBox').on('change', '.selectCity', (function() {
        var citySelection = $('option:selected', this).val();
         switch(citySelection) {
            case '0':
                $('.paris, .rome, .tokyo, .sydney').show();
                break;   
            case '1':
                $('.rome, .tokyo, .sydney').hide();
                $('.paris').show();
                break;
            case '2':
                $('.rome, .paris, .sydney').hide();
                $('.tokyo').show();
                break;
            case '3':
                $('.paris, .tokyo, .sydney').hide();
                $('.rome').show();
                break;
            case '4':
                $('.paris, .tokyo, .rome').hide();
                $('.sydney').show();
                break;
        };
    });

Implement the above adjustments and you'll be all set!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JQuery to handle click events on an array of checkboxes and displaying the value of the selected

I am struggling to show the label text and checkbox value from a checkbox array whenever each one is clicked (for testing purposes, assume I want it to appear in an alert). My HTML looks like this: <label class="checkbox"> <input type="checkbox" ...

javascriptjqueryhtml

Chrome clip-path creates a white horizontal line shape that resembles a paperclip

Having an issue with horizontal white lines appearing through a div with clip-path set and background image in Chrome. Any suggestions on how to fix this? Check out the screenshot for reference: Screenshot showing the horizontal white line bug If you nee ...

cssgoogle-chromeclip-path

Utilizing Vue to pinpoint the DOM element of another component: Steps for success

Upon clicking the sidebar icon in Sidebar.vue component: <i class='bx bx-menu' v-on:click="toggleMenu()" id="btn"></i> I want to toggle the classes of elements in different components: methods: { toggl ...

javascripthtmlcssvue.jsdom

Ensuring the script waits for the complete loading of iframe prior to

I'm faced with an issue on the website I'm currently working on. There's a Live Chat plugin integrated on an iframe, and I need to change an image if no agents are available. Interestingly, my code works perfectly fine when tested on the con ...

javascriptjqueryiframe

Tips for partitioning an element using Selenium and Appium when it lacks a distinctive ID, class, package, or resource identifier:

I am currently trying to determine if I am receiving the expected response from a text message. In order to do this, I need to access the text view of the incoming message. The challenge I am facing is how to distinguish between the received text and the s ...

javascriptandroidseleniumappiumappium-android

Is Fetch executed before or after setState is executed?

I've encountered an issue while trying to send data from the frontend (using React) to the backend (Express) via an HTML form, and subsequently clearing the fields after submission. The code snippet below illustrates what I'm facing. In this scen ...

javascriptreactjssetstate

Send the cookie with the JSON request

While logged into a secure website with a login, I came across some valuable data that is transmitted through the server in JSON format. By opening Chrome and inspecting the page using the "Network" tab, I discovered a URL utilizing XHR which contained the ...

javascriptjsoncookies

The addEventListener function seems to be malfunctioning in the React JS component

Initially, the program runs correctly. However, after pressing the sum or minus button, the function fails to execute. componentDidMount() { if(CONST.INTRO) { this.showIntro(); // display popup with next and previous buttons let plus = docume ...

javascriptreactjsdom-manipulation

A step-by-step guide on using JQuery and Material Design Lite to smoothly scroll to the top of a

Implementing Material-Design-Lite on my website has caused a conflict with the JQuery button that is meant to scroll back to the top of the page. Despite having both installed, the button fails to function properly when clicked. <div class='back-t ...

javascriptjquerycssmaterial-design-lite

Adding a border to dynamically generated content while excluding the outer borders using CSS - an easy guide

My current project involves establishing a grid system that dynamically populates content, resulting in an uncertain number of elements being created. At the moment, each element is placed within a flexbox container with 3 elements per row. If there are mo ...

javascriptjqueryhtmlcsssass

By default, the function is triggered automatically upon clicking the button

I am encountering an issue with the code provided below. The testFunction is being executed automatically when the button click event occurs (default behavior of the CMS I'm using). However, I would like to override this behavior and prevent the testF ...

javascriptjquery

Updating the title of a page on CoreUI's CBreadcrumbRouter dynamically

I'm currently developing a project with VueJS and the CoreUI admin template. Is there a way I can change the title of the current page as shown on the CBreadcrumbRouter? The GitHub documentation mentions that the script typically displays meta.label ...

javascriptvue.jsvue-routercore-ui

How to Use Jquery to Calculate the Total Number of HTML Elements Generated Dynam

Currently, I am trying to count the number of inputs on the document that have a value. The code works fine until I dynamically add more inputs. At that point, I am unable to retrieve their values. Here is an example: <input id="participant-1"/> &l ...

javascriptjqueryonclickdynamically-generated

Tips for including a header with Apollo Client in a React Native app

In my React Native application, here's how I set up the Apollo client with an upload link: My goal is to include a header with a token value that will be sent with every request. However, I've had trouble finding an example specifically for Reac ...

javascriptreact-nativeapollo-client

How can I access the id_lang variable in React JS from outside its scope?

How do I access the 'id_lang' variable outside of the render function in order to pass it down for checking? const Navbar = () => { const getID = async (id) => { let id_lang = id; console.log(id_lang); } ret ...

javascriptnode.jsreactjsstyled-components

Naming convention for callback parameters

Exploring a basic node.js code snippet: var fs = require("fs"); fs.readFile('input.txt', function(err, data){ if(err) console.log(err.toString()); console.log(data.toString()); }); console.log('End of the program'); How d ...

javascriptnode.jscallback

Does the user need to download the scripts from Google API multiple times during the insertion process?

Concerned about the potential need for multiple downloads of a script from an unknown location on the user's computer, I would like to explore options to mitigate this issue. Specifically, I am considering creating a condition to check the download st ...

javascriptphpjqueryajaxgoogle-api

Changing the material color in Three.js from black to transparent

Looking to create a Lambert material using a texture with transparent black color, without using an alphaMap. I have a sphere with a clouds texture that I want to appear transparent black. When I try using blending, it affects the shadows, and I want to m ...

javascriptthree.js

Removing the pound sign from URLs in Angular4 and Express.js route configurations can be achieved by implementing specific

I've set up express routes to serve Angular2 index.html files from the dist folder, and everything is working fine. However, the URLs are loading with # tags when accessed. I attempted to change the location strategy to PathLocationStrategy in app.mo ...

javascriptnode.jsangularexpressroutes

Node.js dilemma of handling numerous asynchronous calls

As someone who is still learning the ins and outs of node.js, please bear with me. My goal is to cycle through an array of servers and assign a maximum of 60 tasks to each one. The number of incoming tasks can vary between 10 and 200. My intention is to a ...

javascriptnode.jsmongodbmongoose