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

Question

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!

javascript jquery html css

Answer 1

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

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 3

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);
    });
});

Answer 4

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);
    });
});

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

Answer №1

Answer №2

Similar questions

Display the variance in values present in an array using Node.js

Is there a way to immobilize an object in JavaScript without resorting to Object.freeze()?

Convert the JSON data received from a jQuery AJAX call into a visually appealing HTML table

Video margins within a webview

An obstacle with jQuery's resize function when checking element visibility

Instructions for setting a default value for ng-options when dealing with nested JSON data in AngularJS

identifying HTTP requests originating from an embedded iframe

Creating a dialog box in jQuery triggered by a user clicking a link

The entire title serves as a hyperlink, not just the text portion

Step-by-step guide on resolving AngularJS Issue: [$injector:modulerr]

Adjust the carousel width on slide in Bootstrap 4

Enhancing Rails forms with JQuery: A guide to updating select options

Can you switch out the double quotation marks for single quotation marks?

jQuery popups are not being initialized properly following an ajax response

Vuetify - Implementing a search feature in a table that automatically navigates to the matching row

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

The client.postMessage() function in a service worker is not being recognized by the onmessage handler within an AngularJS controller

Changing Page Content with Ajax Post-Redirect Pattern

Eliminate any blank spaces in the string before comparing the option value to determine whether the DIV should be

Obtain the identifier for the Summernote component