CODEWITHSUNDEEP
javascript
João Gomes
João Gomes

Reputation: 340

Javascript - Show/clone dropdown lists in succession

I need to create multiple identical dropdown lists, with only the first visible and when filled, the next one shows.

I found some examples and made it so that the second only shows after the first is filled, but I am unable to create a code that works for all lists (without replicating everything). I'm not a programmer, but I can see examples and kinda adapt them.

Can anyone help me?

This is what I used:

    var elem = document.getElementById("q1");
elem.onchange = function(){
var hiddenDiv = document.getElementById("q2");
hiddenDiv.style.display = (this.value == "") ? "none":"block";
this.disabled = 'disabled';
};

https://jsfiddle.net/mbus6w11/6/

Upvotes: 0

Views: 40

Answers (1)

Ankit Sahay
Ankit Sahay

Reputation: 2043

This is what I am proposing: Have each select element in a div and give each of them an ID, Add an onChange function to all of your select elements (you can leave the last one out) In your script, set the visibility of second and third div as false, In the onChange function, set visibility of the next select element true.

Here is the code:

    <div id = "first">
       <select onchange="myFunction1()">
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
       </select> 
    </div>

    <div id = "second">
       <select onchange="myFunction2()">
           <option value="volvo">Volvo</option>
           <option value="saab">Saab</option>
       </select> 
    </div>

    <div id = "third">
       <select>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>    
       </select>
    </div>

Javascript:

    document.getElementById("second").style.visibility = "hidden";
    document.getElementById("third").style.visibility = "hidden";

    function myFunction1() {
        document.getElementById("second").style.visibility = "visible";
    }

    function myFunction2() {
        document.getElementById("third").style.visibility = "visible";    
    }

Upvotes: 1

Related Questions