Agradecería cualquier sugerencia. Necesito usar varios menús desplegables en algunas partes del documento de rebajas. La parte 1 está funcionando, pero la otra no. ¿Alguien me ayudaría? Gracias por adelantado.

 <script language="javascript"> function display(){ var e = document.getElementById("dropDownId"); var index = e.selectedIndex; if(index==0){ document.getElementById("first").style.display = 'block' document.getElementById("second").style.display = 'none' } else if(index==1){ document.getElementById("first").style.display = 'none' document.getElementById("second").style.display = 'block' } } </script> # Part 1 <select class="bootstrap-select" id="dropDownId" onchange="display()"> <option value="1" selected="selected">Metric</option> <option value="2">Non-metric</option> </select> <div id="first">plot 1</div> <div id="second" style="display: none;">plot 2</div> # Part 2 <select class="bootstrap-select" id="dropDownId" onchange="display()"> <option value="1" selected="selected">Metric</option> <option value="2">Non-metric</option> </select> <div id="first">plot 3</div> <div id="second" style="display: none;">plot 4</div> # Part 3 <select class="bootstrap-select" id="dropDownId" onchange="display()"> <option value="1" selected="selected">Metric</option> <option value="2">Non-metric</option> </select> <div id="first">plot 4</div> <div id="second" style="display: none;">plot 5</div>