How to display a new dropdown with certain values on changing any value in another dropdown jquery

Question

I have a dropdown with values A and B. I need to get another dropdown with a set of values 1,2,3,4 only if I change any value in my dropdown ('mySelect'). I need not change the value based on the selection. I just need to display another dropdown ('newSelect').

Dropdown 1:

  <select id="mySelect" title="" disabled="disabled">
                        <option value="">Select</option> 
                        <option value="A">A</option>
                        <option value="B">B</option>
  </select>

If I change the value of dropdown 1, I need to get another dropdown(dropdown 2)

Dropdown 2:

<select id="newSelect" title="" disabled="disabled">
                        <option value="">Select</option> 
                        <option value="1">Open</option>
                        <option value="2">Closed</option>
                        <option value="3">Reopen</option>
                        <option value="4">InProgress</option>
</select>

Please advice me how to achieve this.

score 0 · Answer 1 · answered Dec 31 '20 at 08:10

0

Start your newSelect as hidden:

<select id="newSelect" title="" disabled="disabled" style="display: none">
...
</select>

Tell mySelect to show newSelect whenever mySelect is changed:

$('#mySelect').on('change', function() {
  $('#newSelect').show();
});

answered Dec 31 '20 at 08:10

kmoser

8,780
3
24
40

Thank you for the quick answer !, I have a question why my newSelect is not showing up even after changing mySelect. is it due to the style display none? – Staicy Dec 31 '20 at 08:29
It could be one of many things, which I can only guess at without seeing your code. Please [edit your question](https://stackoverflow.com/posts/65518157/edit) to include a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the problem you are having. – kmoser Dec 31 '20 at 09:11

score 0 · Answer 2 · answered Dec 31 '20 at 09:45

There are multiple options. I believe you just want to display another dropdown if user selects any value from the first menu. You can use onChange function and display second menu. For testing purpose, i have removed disabled attribute.

const   subMenu = document.getElementById("newSelect");
const mainMenu = document.getElementById("mySelect");

window.onload = function() {
  subMenu.style.display = "none";
}   
        
mainMenu.onchange = function () {
  subMenu.style.display = "block";
}

<!DOCTYPE html>
<html>
<head>
    
</head>
    <body>
        <select id="mySelect" title="">
            <option value="">Select</option> 
            <option value="A">A</option>
            <option value="B">B</option>
        </select>

        <select id="newSelect" title="" >
            <option value="">Select</option> 
            <option value="1">Open</option>
            <option value="2">Closed</option>
            <option value="3">Reopen</option>
            <option value="4">InProgress</option>
    </select>  
</body>
</html>

score 0 · Answer 3 · edited Dec 31 '20 at 10:32

I think this is what you were hoping for, where the second dropdown is shown when the first is not left unselected (i.e. has a value of 'Select'). If you only want the second dropdown to be shown on a specific choice in the first dropdown then you can change the following line:

if ($("#mySelect option:selected").text() == "Select") {

To this (remember to replace YOUR_VALUE), here we would be checking if the value is not equal to YOUR_VALUE and therefore hide the second dropdown:

if ($("#mySelect option:selected").text() != "YOUR_VALUE") {

Let me know if you needed anything else.

Ollie

// Hide select on load
$("#newSelect").hide();

// Add event to change of first select
$("#mySelect").change(function() {

  // Check if selected option is 'Select'
  if ($("#mySelect option:selected").text() == "Select") {

    // Hide the second dropdown if the first dropdown is 'Select'
    $("#newSelect").hide();

  } else {

    // Show the second dropdown if the first is not equal to 'Select'
    $("#newSelect").show();

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <select id="mySelect" title="">
    <option value="">Select</option>
    <option value="A">A</option>
    <option value="B">B</option>
  </select>
</div>

<div>
  If I change the value of dropdown 1, I need to get another dropdown(dropdown 2) Dropdown 2:
</div>

<div>
  <select id="newSelect" title="" disabled="disabled">
    <option value="">Select</option>
    <option value="1">Open</option>
    <option value="2">Closed</option>
    <option value="3">Reopen</option>
    <option value="4">InProgress</option>
  </select>
</div>

How to display a new dropdown with certain values on changing any value in another dropdown jquery

3 Answers3