What is the method for presenting text based on the chosen Select Option?

I attempted to achieve this using hrefs and ids, but it did not meet my requirements.

This is the desired format:

div.selectcountry {
  margin-bottom: 10px;
  font-family: arial;
  font-size: 12px;
}
div.countrydepartment {
  font-family: arial;
  font-size: 12px;
}
<div class="selectcountry">Choose your country: <select>
  <option>Russia</option>
  <option>China</option>
  <option>Tajikistan</option>
  </select></div>

<div class="countrydepartment">Here should be a text depending on the chosen country.<br>
– Russian department: +7 (000) 000 00 00<br>
– Chinese department: +86 (000) 000 00 00<br>
– Tajikistan department: +992 (000) 000 00 00<br>
</div>

This webpage provides an example of what I am trying to achieve:

How can I accomplish this? Perhaps using JavaScript? But how? Please provide me with instructions.

Thank you for your assistance and guidance!

javascriptjqueryhtmlcss

Answer №1

Implement event listening in jQuery for changes.

$('.selectcountry select').change(function() {
  country = $(this).val();
  //reset
  $('.countrydepartment span').removeClass('active');
  //display current country department
  $('.countrydepartment span[country="' + country + '"]').addClass('active');
});
div.selectcountry {
  margin-bottom: 10px;
  font-family: arial;
  font-size: 12px;
}
div.countrydepartment {
  font-family: arial;
  font-size: 12px;
}
.countrydepartment span {
  display: none;
}
.countrydepartment span.active {
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="selectcountry">
  Choose your country:
  <select>
    <option selected disabled>--- Select Your Country ---</option>
    <option value='russia'>Russia</option>
    <option value='china'>China</option>
    <option value='tajikistan'>Tajikistan</option>
  </select>
</div>

<div class="countrydepartment">
  <span country='russia'>— Russian department: +7 (000) 000 00 00</span>
  <span country='china'>— Chinese department: +86 (000) 000 00 00</span>
  <span country='tajikistan'>— Tajikistan department: +992 (000) 000 00 00</span>
</div>

Answer №2

To effectively monitor changes in the select element, it is important to assign appropriate classes:

<div class="selectcountry">Choose your country:
    <select class="selcountry">
        <option value='1'>Canada</option>
        <option value='2'>Brazil</option>
        <option value='3'>Australia</option>
    </select>
</div>
<div class="countrydepartment">Text specific to the selected country will be displayed here.
    <div id='countrycontacts'></div>
</div>

Below is a sample JavaScript/jQuery code snippet for handling the change event:

$(function () {
    var cc = ['Canadian department: +1 (000) 000 00 00', 'Brazilian department: +55 (000) 000 00 00', 'Australian department: +61 (000) 000 00 00'];
    $('.selcountry').change(function(e) {
        var country = $(this).val() - 1;
        var contactinfo = cc[country];
        $('#countrycontacts').html(contactinfo);
    });
});

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

Having difficulties with Cypress test for dragging and dropping an element within the same area

I am experimenting with the drag and drop feature using a plugin called 4teamwork/cypress-drag-drop. I have a scenario where there are three elements stacked on top of each other. The task is to select the first element and move it under the last element i ...

htmlreactjscypress

Having difficulty displaying this code accurately on Google Chrome

I managed to create a hover effect over a series of images that displays additional information when hovered over. Below is the code I used: HTML <ul class="photo-grid"> <li> <a href="https://www.abglobal.com/" target="_blank"& ...

htmlcssgoogle-chromemousehover

Display a D3 Collapsible Tree visualization using information stored in a variable

I am currently working on an app that requires the display of a collapsible tree graph using D3. The data needed for this graph is not stored in a file, but rather within the database. It is retrieved through an Ajax call to a rest service and then passed ...

javascriptjqueryajaxjsond3.js

Encountered an issue when trying to establish a connection to the MySQL database on Openshift using a

I am currently running a Node.js app with Express that is deployed on OpenShift. I have set up databases using the PHPMyAdmin 4.0 cartridge. Although I can establish a connection to the database, anytime I run a query, it throws an ECONNREFUSED error. Whe ...

javascriptmysqlnode.jsphpmyadmin

The functionality of 'Access-Control-Allow-Origin': '*' is not operational

I attempted to address all inquiries pertaining to this tag, yet I encountered a hurdle. Where did I go wrong? $(document).ready(function () { $.ajax({ type: "GET", url: "http://www.tcmb.gov.tr/kurlar/today.xml", dataType: "xml ...

javascriptjqueryasp.netajax

Switching the background image upon hover while incorporating a subtle fade transition in HTML and CSS

Is there a way to set two background images on a div and have them change when hovering with a fade effect? Similar to the example shown. .kid { max-width:50%; position:relative; } .kid img { display:block; opacity:1; height: auto; transition:.6s ease; ...

htmlcssanimationhoverfade

Tips for dynamically populating select options with objects

After executing a query using ajax to retrieve data from a database, I found that the response is in the format shown below. array(206) { [0]=> object(stdClass)#6707 (8) { ["id"]=> string(1) "8" ["year"]=> string(4) "1947" ["make"]=> string(7) ...

phpjqueryajaxdatabasewordpress

What is the best way to ensure that a specified number of list items (li) will align properly within the width of an unordered list (ul

I'm attempting to make all the li elements' width match that of my ul element. Here is the code I am using: http://jsfiddle.net/4XR5V/2/ I have looked at some similar questions on the website and tried adding: ul { width: 100%; display: tab ...

htmlcss

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column should accommodate 2 inputs. The numb ...

csscss-grid

Mastering Node.js: Writing to a Write Stream on the 'finish' Event

I'm currently using Node.js streams to process a text file line by line, apply some transformations, and then generate an SVG file based on the data. However, I am facing an issue where when I try to write the closing tag (</svg>) after all pro ...

javascriptnode.jsstream

What is the best way to showcase a user's input in a webpage using vanilla javascript

Struggling with creating functionalities for a simple calculator using vanilla.js. Able to display numbers on click but facing issues with multiple clicks and deletion of values. Trying to use addeventlistener but encountering a Type Error "addeventliste ...

javascript

Is it possible to stream audio using a web socket?

I'm currently working on an app that streams audio from a microphone using web sockets. I'm struggling to play the web socket response in an audio control. Can someone please provide guidance on how to play audio buffer in an audio control? Your ...

javascripthtmlwebrtc

Choose a specific inner div element within another div using jQuery

Trying to target a specific div within another div in my HTML structure. Here's how it looks: <div id="Stage_game_page1"><div id="cube0">[...]</div><div id="cube1">[...]</div></div> I am attempting to select #cube ...

javascriptjqueryfor-loopjquery-selectors

Retrieving Distinct Values in CouchDB

In my database, there are documents that represent different rooms. Each room has properties like "floor" and "hotel", among others. What I need to do is fetch all the floors associated with a specific hotel from the database. Something like getAllFloorsOn ...

javascriptcouchdb

Creating a Seamless Bond Between JavaScript and HTML

I've been struggling to find a helpful and straightforward solution to a simple problem. On my web page, I have five image placeholders that should be filled with one of nine random pictures. To achieve this, I wrote a JavaScript code that generates r ...

javascripthtml

Loop through the v-for based on the input number that was selected

I'm looking to accomplish the following: if a user selects input X (a number between 1 and 10), I want to render a specific vue component X times. It seems to work if I use v-for n in 10, but not when I use variables. <template> <div> ...

javascriptlistvue.jsrendering

Tips on capturing the response data in UI testing automation

Currently, I am working on automating a login page using WebDriverIO for UI Automation. After clicking the Login button, a request to *.com/user/login is triggered in the background. I need to capture this call's response in order to obtain a token r ...

javascriptnode.jsnpmwebdriver-io

Tips for testing Sequelize with Jasmine

In my database/index.ts file, I set up a Sequelize database using the code below: import { Sequelize } from 'sequelize'; const { DATABASE_DIALECT, DATABASE_HOST, DATABASE_PORT, DATABASE_USER_NAME, DATABASE_USER_PASSWORD, DATABASE_NAM ...

javascriptnode.jspostgresqlunit-testingsequelize.js

The Art of Dynamic Component Manipulation in Angular

The current official documentation only demonstrates how to dynamically alter components within an <ng-template> tag. https://angular.io/guide/dynamic-component-loader My goal is to have 3 components: header, section, and footer with the following s ...

htmlangulartypescript

Updating interval time based on an external variable with jQuery

I have developed a JavaScript script where pressing a button triggers the continuous playback of an audio file. The audio, which is a 'beep' sound, serves as an alarm. The frequency at which the beep plays is determined by a setting located on a ...

javascriptjqueryajaxintervals