"Swap out div content based on chosen dropdown option with the help of Jquery

I am trying to update the languages within my div based on the country I select. Here's what I have attempted so far, but it doesn't seem to be functioning correctly.

I have included a link to my fiddle in the comments since I can't paste it here.

Answer №1

Make two adjustments: 1. Ensure that the value is set to either 1, 2, or 3

 <ul class="country-list" id="country-list" onchange="getval(this);">
                <li value="1" class="Germany">Germany</li>
                <li value="2" class="Singapore">Singapore</li>
                <li value="3" class="Philippines">Philippines</li>
            </ul>

Additionally,

$(".country-list li").click(function() {
           $('#country-dropdown').text($(this).text());
           $('#country-dropdown').click();
           console.log(('.d'+$(this).val()));
            $('.lang').hide();
            $('.d'+$(this).val()).show();
       });

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

Reduced resolution decreases image size significantly (bootstrap-5 Fluid)

What's Currently Happening: While using the Chrome browser's device toolbar tool to test my site at various resolutions, I observed that when I shrink the device screen to "Mobile-s" 320px, the content on my page becomes nearly unreadable. Additi ...

SystemJS is loading classes that are extending others

In my Angular2 application, I have two classes where one extends the other. The first class is defined in the file course.ts (loaded as js) export class Course { id:string; } The second class is in schoolCourse.ts (also loaded as js) import {Cours ...

Does the color of the item change as it gets older?

How can I smoothly transition a color as it ages using a dynamic time scale? I want to calculate the age based on the difference in time rather than triggering an animation after an event. I aim for a seamless gradient transition between two colors over a ...

The issue of Storybook webpack failing to load SCSS files persists

I'm running into an issue where my styles are not loading in Storybook, even though I'm not getting any errors. Can someone help me out? My setup involves webpack 2.2.1. I've scoured Stack Overflow and GitHub for solutions, but nothing seem ...

ES5 approach to Angular2 HTTP Providers (not TypeScript)

I'm currently developing an application and experimenting with Angular2 using ES5 JavaScript for fun. My main inquiry right now is how to access the Http service. Most of the available documentation is in TypeScript, which is not very helpful, or it p ...

Javascript addClass and removeClass functions are not functioning as expected

Can you help me figure out why the icon still goes into the "startSharing" section even when it is turned off? In my html file, I have the following code for the icon: <div class="startSharing"></div> And in my javascript file, I have the fo ...

Refresh a DIV using two SQL queries in forms

I am encountering an issue with updating a single div element using the results from two different forms on an HTML page. I want either form1 or form2 to display results in the same div element, and it should be updated with one line of content fetched fro ...

Issue with mouse movement in Selenium and Protractor not functioning as expected

Greetings! I am currently facing an issue in my Angular application with Openlayers3 map integration. There is a layer representing a building on the map, and when I try to click on a building during testing, it should trigger a side panel displaying image ...

How can I use HTML code to style the header cell values of a table?

Can someone please assist me with creating a table header style that looks like the one in the image? Additionally, how can I turn the name and picture area into a block and add borders to them? I'm also having trouble with my list icons showing up a ...

Is there any update to expressValidator in Node.js?

In this particular nodejs file, the code is designed to receive and validate email names and other information before storing them in a database. Normally, we would use app.use(expressValidator()) for validation, but in this case, the definition has been a ...

Combining Sass and SCSS in webpack: A step-by-step guide

Just curious about something. I have some libraries I'm interested in using (for example, font-awesome) that use scss, but I personally prefer working with sass. How can I set up my project with webpack to accommodate this? Here's my current s ...

Ways to verify the identity of a user using an external authentication service

One of my microservices deals with user login and registration. Upon making a request to localhost:8080 with the body { "username": "test", "password":"test"}, I receive an authentication token like this: { "tok ...

Cross-origin resource sharing problem arises when JavaScript is loaded asynchronously using script tags created dynamically

By dynamically creating a script as shown below, the JavaScript source is downloaded asynchronously. let newScript = document.createElement('script'); newScript.src = srcUrl; let firstScript = document.getElementsByTagName('script')[0] ...

Having difficulties implementing horizontal scrolling for the Tabs component in Material UI

I can't seem to enable horizontal scrolling for the Tabs in material UI. Here is the version of Material UI I am using: As the number of Tabs increases, they are becoming wider. I tried to set the width, but it ends up affecting the entire Tabs tab ...

Switching the loading order of jQuery and AngularJS to load jQuery after AngularJS

If you want angular.element to reference jQuery instead of jQLite, make sure to load jQuery before Angular in the page head. On mobile devices, performance is key. It would be great if jQuery could be loaded after AngularJS for better overall performance, ...

Can you share any recommendations or instances of modifying data within HTML tables using Laravel?

Has anyone ever needed to directly edit and update data in a HTML table using Laravel? I have successfully created "create" tables for different tasks, but I'm interested in being able to modify the data directly on an "index" page. While there are ...

Ways to block WebSocket access on a personal computer

Is it possible to protect my server resources from being accessed by other websites, such as example.com, via WebSocket? I want to prevent them from accessing the server using a URL like "ws://47.80.151.189:1234", and utilizing its resources (bandwidth, me ...

I am unable to integrate Autoprefixer into an Express project

I am having trouble adding Autoprefixers to the postcssmiddleware, as mentioned in the documentation here I also attempted using express-autoprefixers but still cannot see the vendors in my dest or public folder. You can find a link to my repository (node ...

Guide to utilizing a web worker from an npm package in your primary webpack application

My project is structured in the following way: moduleA -> Library that I publish to npm using Rollup projectA -> My Gatsby project that installs moduleA and utilizes it. To bundle my workers with other library code into the dist folder, I am using ...

Enhance the appearance of Google Maps by incorporating gradient effects, box shadows, or other similar visual

How can I add a linear gradient to Google Maps? Below is my code snippet. HTML <div id="map"></div> CSS #map{ height:100vh; background: linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%), linear-gradient(180deg, # ...