Display an additional dropdown menu after the user has made a selection in the first dropdown

Question

Display an additional dropdown menu after the user has made a selection in the first dropdown

Initially, I must address a concern that has previously been resolved; however, the alternative options available on this platform do not meet my needs.

Essentially, I aim to create a concise form with two dropdown menus. The first dropdown menu is always visible, while the second is hidden by default. When a specific option in the first dropdown menu is selected, I want the second dropdown menu to become visible. To illustrate, refer to this example:

http://jsfiddle.net/whkQw/20/

Nevertheless, unlike the aforementioned example, I require distinct sets of options to appear in the second dropdown menu for EACH selection made in the first dropdown menu, rather than just one option. In other words, if "China" is selected in the first dropdown menu in the previous example, the second dropdown menu will show up; however, selecting any other option will keep it hidden. This is not the functionality I desire. I want a separate set of options to display when "Taiwan" is selected, and yet another set when "Germany" is selected, and so forth for each option. I attempted to duplicate the JavaScript from the above example for each option, adjusting the name tags accordingly, but it was unsuccessful (due to my limited experience with JavaScript).

Subsequently, I stumbled upon this ideal scenario that aligns with what I am seeking:

http://jsfiddle.net/e9XvP/

However, for some reason, this code does not seem to function for me. It produces no effect whatsoever; the second dropdown remains concealed regardless of the selection. My dropdown lists are more extensive and elaborate compared to those in the provided example. Here is the current HTML I have:

Dropdown 1

<div class="ccms_form_element cfdiv_custom" id="style_container_div">
<label>Choose Rank: </label><select size="1" id="Rank" class=" validate['required']" title="" type="select" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="Airman">Airman</option>
    <option value="Airman First Class">Airman First Class</option>
    <option value="Senior Airman">Senior Airman</option>
    <option value="Staff Sergeant">Staff Sergeant</option>
    <option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select><div class="clear"></div><div id="error-message-style"></div></div>

Dropdown 2:

(dropdown 2 HTML)

In conclusion, neither of the JavaScript codes provided in the examples work for me, and I lack adequate experience in JavaScript (and HTML) to troubleshoot effectively. Any guidance would be immensely beneficial.

Furthermore, once a user selects an option in the second dropdown menu, I wish for a customized line of text (specific to their selection) to appear below the dropdown menu. Here's a reference link for such functionality:

Toggle a hidden div when a particular dropdown option is selected/de-selected

Unlike the referenced example, I aim to display distinct lines of text for every selection made in the dropdown menu. How can I adapt the code in the sample to achieve this?

I understand this may evolve into a substantial project, so feel free to provide a brief overview of how I should modify the code to implement this feature for multiple options, instead of detailing everything extensively. As evidenced by the length of this post, I am comfortable with lengthy discussions.

Any assistance would be highly appreciated.

Thank you in advance.

javascript css html drop-down-menu

Answer 1

Answer №1

By now, you've stumbled upon what is possibly the simplest HTML markup to handle this task:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="Airman">Airman</option>
    <option value="Airman First Class">Airman First Class</option>
    <option value="Senior Airman">Senior Airman</option>
    <option value="Staff Sergeant">Staff Sergeant</option>
    <option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select>

Followed by a <element> container for each possible option within the <option> tags.

<div>
    // For Airman
</div>
<div>
    // For Senior Airman
</div>

... and so on...

This layout can be used consistently for all elements that rely on the selected <option>; such as the unique line of text or other select boxes. Each should be enclosed in a container element to facilitate targeting them collectively.

<div class="container">
    <div>
        Line of text for Airman
    </div>
    <div>
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div>
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div>
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

Assign identifiers to each <div> we have created, allowing us to identify which ones correspond to "Airman" when it is selected (and therefore display those).

<div class="container">
    <div class="airman">
        Line of text for Airman
    </div>
    <div class="senior-airman">
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div class="airman">
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div class="senior-airman">
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

Include the same identifier in the <options> of the <select id="rank">:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="airman">Airman</option>
    <option value="senior-airman">Senior Airman</option>
</select>

With this structure in place, implementing JavaScript to show/hide elements becomes incredibly simple!

$(document).ready(function () {
    $('#Rank').bind('change', function () {
        var elements = $('div.container').children().hide(); // hide all elements
        var value = $(this).val();

        if (value.length) { // if an option is selected
            elements.filter('.' + value).show(); // show the relevant elements
        }
    }).trigger('change'); // Set initial states
});

Done! Try out an example here: http://jsfiddle.net/3UWk2/1/

A Quick Update

The reason your previous modification didn't work is because there is no event handler attached to the second level <select> boxes; only to the main <select id="rank">.

To address this, replicate the steps taken for the first level navigation for the second level. Instead of using an #id selector for the <select>, utilize a .class since there are multiple <select> elements to target:

$('.second-level-select').bind('change', function () {
    var elements = $('div.second-level-container').children().hide(); // hide all elements
    var value = $(this).val();

    if (value.length) { // if an option is selected
        elements.filter('.' + value).show(); // display the desired elements
    }
}).trigger('change'); // Set initial states

It's also important to rename the div.container to prevent interference between the <select> boxes.

Check out the updated example here: http://jsfiddle.net/3UWk2/3/

Answer 2

By now, you've stumbled upon what is possibly the simplest HTML markup to handle this task:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="Airman">Airman</option>
    <option value="Airman First Class">Airman First Class</option>
    <option value="Senior Airman">Senior Airman</option>
    <option value="Staff Sergeant">Staff Sergeant</option>
    <option value="Senior Master Sergeant">Senior Master Sergeant</option>
</select>

Followed by a <element> container for each possible option within the <option> tags.

<div>
    // For Airman
</div>
<div>
    // For Senior Airman
</div>

... and so on...

This layout can be used consistently for all elements that rely on the selected <option>; such as the unique line of text or other select boxes. Each should be enclosed in a container element to facilitate targeting them collectively.

<div class="container">
    <div>
        Line of text for Airman
    </div>
    <div>
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div>
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div>
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

Assign identifiers to each <div> we have created, allowing us to identify which ones correspond to "Airman" when it is selected (and therefore display those).

<div class="container">
    <div class="airman">
        Line of text for Airman
    </div>
    <div class="senior-airman">
        Line of text for Senior Airman
    </div>
</div>

<div class="container">
    <div class="airman">
        <select>
            <option>Airman Stuff</option>
        </select>
    </div>
    <div class="senior-airman">
        <select>
            <option>Senior Airman Stuff</option>
        </select>
    </div>
</div>

Include the same identifier in the <options> of the <select id="rank">:

<select size="1" id="Rank" title="" name="Rank">
    <option value="">-Select Your Rank-</option>
    <option value="airman">Airman</option>
    <option value="senior-airman">Senior Airman</option>
</select>

With this structure in place, implementing JavaScript to show/hide elements becomes incredibly simple!

$(document).ready(function () {
    $('#Rank').bind('change', function () {
        var elements = $('div.container').children().hide(); // hide all elements
        var value = $(this).val();

        if (value.length) { // if an option is selected
            elements.filter('.' + value).show(); // show the relevant elements
        }
    }).trigger('change'); // Set initial states
});

Done! Try out an example here: http://jsfiddle.net/3UWk2/1/

A Quick Update

The reason your previous modification didn't work is because there is no event handler attached to the second level <select> boxes; only to the main <select id="rank">.

To address this, replicate the steps taken for the first level navigation for the second level. Instead of using an #id selector for the <select>, utilize a .class since there are multiple <select> elements to target:

$('.second-level-select').bind('change', function () {
    var elements = $('div.second-level-container').children().hide(); // hide all elements
    var value = $(this).val();

    if (value.length) { // if an option is selected
        elements.filter('.' + value).show(); // display the desired elements
    }
}).trigger('change'); // Set initial states

It's also important to rename the div.container to prevent interference between the <select> boxes.

Check out the updated example here: http://jsfiddle.net/3UWk2/3/

Answer 3

Answer №2

Wow, that code may seem daunting at first glance... but fear not, with the power of jQuery it becomes a breeze (if you choose to go that route). Check out my example.

The initial step is to eliminate any spaces in the id's - it's generally best practice. Next, you simply toggle visibility based on the selected values in the dropdown list by using them as ids.

Here's the essential jQuery snippet (remember to include the jQuery library link):

$("#Rank").change(function(){
   var correspondingID = $(this).find(":selected").val();
   $(".style-sub-1").hide();
   $("#" + correspondingID).show();
})

Answer 4

Wow, that code may seem daunting at first glance... but fear not, with the power of jQuery it becomes a breeze (if you choose to go that route). Check out my example.

The initial step is to eliminate any spaces in the id's - it's generally best practice. Next, you simply toggle visibility based on the selected values in the dropdown list by using them as ids.

Here's the essential jQuery snippet (remember to include the jQuery library link):

$("#Rank").change(function(){
   var correspondingID = $(this).find(":selected").val();
   $(".style-sub-1").hide();
   $("#" + correspondingID).show();
})

Answer 5

Answer №3

One effective solution I recommend is utilizing AJAX. When dealing with numerous options and sub-options, loading everything at once becomes unnecessary. Instead, consider sending an AJAX request to dynamically update the second select menu with relevant choices. By storing the appropriate text for each option in the database, you can provide users with all the information they need without overwhelming them with excessive selections.

Answer 6

One effective solution I recommend is utilizing AJAX. When dealing with numerous options and sub-options, loading everything at once becomes unnecessary. Instead, consider sending an AJAX request to dynamically update the second select menu with relevant choices. By storing the appropriate text for each option in the database, you can provide users with all the information they need without overwhelming them with excessive selections.

Answer 7

Answer №4

start by adding the html code

 <!-------dropdown one----------->
    <select name="make" id="elements">
      <option value="">-</option>
      <option value="Satec" >Satec</option>
      <option data-val='m2' value="Masibus" >Masibus</option>
      <option data-val='m3' value="Pyrotech" >Pyrotech</option>
       <option data-val='m4' value="Schneider" >Schneider</option>

    </select>

    <!---------dropdown two---------->
    <select name="model" id="category">
      <option value="">-</option>
      <option value="PM130" >PM130</option>
      <option value="PM2160A" >PM2160A</option>
      <option value="MFM101" >MFM101</option>
       <option value="ABC" >ABC</option>
    </select>

next, include the javascript script

<script>
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'm2') {
      category.value = 'PM2160A';
    }
    else if (optionSelected.dataset.val === 'm3')  {
    category.value='MFM101';
}
    else if (optionSelected.dataset.val === 'm4')  {
    category.value='ABC';
}
    else {
      category.value = 'PM130';
    }
  } else {
    category.value = '';
  }
}
</script>

This solution is guaranteed to be effective.

Answer 8

start by adding the html code

 <!-------dropdown one----------->
    <select name="make" id="elements">
      <option value="">-</option>
      <option value="Satec" >Satec</option>
      <option data-val='m2' value="Masibus" >Masibus</option>
      <option data-val='m3' value="Pyrotech" >Pyrotech</option>
       <option data-val='m4' value="Schneider" >Schneider</option>

    </select>

    <!---------dropdown two---------->
    <select name="model" id="category">
      <option value="">-</option>
      <option value="PM130" >PM130</option>
      <option value="PM2160A" >PM2160A</option>
      <option value="MFM101" >MFM101</option>
       <option value="ABC" >ABC</option>
    </select>

next, include the javascript script

<script>
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
  var optionSelected = this.options[this.selectedIndex];
  if (optionSelected.textContent != '-') {
    if (optionSelected.dataset.val === 'm2') {
      category.value = 'PM2160A';
    }
    else if (optionSelected.dataset.val === 'm3')  {
    category.value='MFM101';
}
    else if (optionSelected.dataset.val === 'm4')  {
    category.value='ABC';
}
    else {
      category.value = 'PM130';
    }
  } else {
    category.value = '';
  }
}
</script>

This solution is guaranteed to be effective.

Display an additional dropdown menu after the user has made a selection in the first dropdown

Answer №1

A Quick Update

Answer №2

Answer №3

Answer №4

Similar questions

How to customize the appearance of the Facebook login button alongside other login options

Utilizing Node.js with Graphics Magick to generate high-quality cropped thumbnails without sacrificing image resolution

Modify the size of the fabricjs text box to perfectly match the chosen text

Issue with Bootstrap dropdown menu not closing correctly when clicked on mobile devices

Unable to load local image file for texture in Three.js

Creating a dropdown menu within a <span> element with JavaScript

The CDN version of Font Awesome is not displaying the necessary icon

The status of "Checked" has now been set to untrue

Getting a blank request body error while receiving data from an Angular 4 application in Express

Tips for testing the onEnter and resolve functions of a ui-router state

Utilizing CSS for customizing selectors in a Moodle form

Tips on transitioning between two tables

Failure of Ajax POST requests to refresh screen content

Make a copy of an array and modify the original in a different way

An issue has emerged: React cannot render objects as children. The culprit appears to be an object containing keys such as {

Seeking materials for WebDriverJs?

How can I activate a function or pass a selected value to a different scope variable using AngularUI Bootstrap Datepicker?

Creating compressed files using JavaScript

The AJAX call is not being identified correctly

CSS: Struggling to properly position two flex items