Faire un travail de liste déroulante comme onglets

Question

J'ai 5 formes que je voudrais sélectionner dans une liste déroulante sur une seule page. J'en ai besoin pour travailler de la même manière que les onglets, sauf avec une boîte déroulante. Quelqu'un pourrait-il me diriger dans la direction pour faire ce travail? Je veux cliquer sur la case déroulante pour afficher le contenu de la tabulation ... mais sans les boutons de tabulation.

Le Tchad

function openCity(evt, cityName) { 
 
    // Declare all variables 
 
    var i, tabcontent, tablinks; 
 

 
    // Get all elements with class="tabcontent" and hide them 
 
    tabcontent = document.getElementsByClassName("tabcontent"); 
 
    for (i = 0; i < tabcontent.length; i++) { 
 
     tabcontent[i].style.display = "none"; 
 
    } 
 

 
    // Get all elements with class="tablinks" and remove the class "active" 
 
    tablinks = document.getElementsByClassName("tablinks"); 
 
    for (i = 0; i < tablinks.length; i++) { 
 
     tablinks[i].className = tablinks[i].className.replace(" active", ""); 
 
    } 
 

 
    // Show the current tab, and add an "active" class to the button that opened the tab 
 
    document.getElementById(cityName).style.display = "block"; 
 
    evt.currentTarget.className += " active"; 
 
}

/* Style the tab */ 
 
div.tab { 
 
    overflow: hidden; 
 
    border: 1px solid #ccc; 
 
    background-color: #f1f1f1; 
 
} 
 

 
/* Style the buttons inside the tab */ 
 
div.tab button { 
 
    background-color: inherit; 
 
    float: left; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
    padding: 14px 16px; 
 
    transition: 0.3s; 
 
} 
 

 
/* Change background color of buttons on hover */ 
 
div.tab button:hover { 
 
    background-color: #ddd; 
 
} 
 

 
/* Create an active/current tablink class */ 
 
div.tab button.active { 
 
    background-color: #ccc; 
 
} 
 

 
/* Style the tab content */ 
 
.tabcontent { 
 
    display: none; 
 
    padding: 6px 12px; 
 
    border: 1px solid #ccc; 
 
    border-top: none; 
 
}

<select> 
 
    <option value="" disabled="disabled" selected="selected">Please select name</option> 
 
    <option value="Tom">London</option> 
 
    <option value="Marry">Paris</option> 
 
    <option value="Jane">Tokyo</option> 
 
</select> 
 
<div class="tab"> 
 
    <button class="tablinks" onclick="openCity(event, 'London')">London</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> 
 
    <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> 
 
</div> 
 

 
<div id="London" class="tabcontent"> 
 
    <h3>London</h3> 
 
    <p>London is the capital city of England.</p> 
 
</div> 
 

 
<div id="Paris" class="tabcontent"> 
 
    <h3>Paris</h3> 
 
    <p>Paris is the capital of France.</p> 
 
</div> 
 

 
<div id="Tokyo" class="tabcontent"> 
 
    <h3>Tokyo</h3> 
 
    <p>Tokyo is the capital of Japan.</p> 
 
</div>

Answer 1

Il y aura quelques changements à ce que vous avez à faire dans votre code HTML et javascript code.

J'ai fait ces changements ci-dessous

// est en dessous du code HTML

<select id="change_form_dropdown" onchange="openCity()"> 
    <option value="" disabled="disabled" selected="selected">Please select name</option> 
    <option value="London">London</option> 
    <option value="Paris">Paris</option> 
    <option value="Tokyo">Tokyo</option> 
</select> 
<div class="tab"> 
    <button class="tablinks">London</button> 
    <button class="tablinks">Paris</button> 
    <button class="tablinks">Tokyo</button> 
</div> 

<div id="London" class="tabcontent"> 
    <h3>London</h3> 
    <p>London is the capital city of England.</p> 
</div> 

<div id="Paris" class="tabcontent"> 
    <h3>Paris</h3> 
    <p>Paris is the capital of France.</p> 
</div> 

<div id="Tokyo" class="tabcontent"> 
    <h3>Tokyo</h3> 
    <p>Tokyo is the capital of Japan.</p> 
</div> 

// Et voici le code javascript.

function openCity() { 
    var dropdown_element = document.getElementById("change_form_dropdown"); 
    var cityName = 
      dropdown_element.options[dropdown_element.selectedIndex].value; 

    // Declare all variables 
    var i, tabcontent, tablinks; 

    // Get all elements with class="tabcontent" and hide them 
    tabcontent = document.getElementsByClassName("tabcontent"); 
    for (i = 0; i < tabcontent.length; i++) { 
     tabcontent[i].style.display = "none"; 
    } 

    // Show the current tab, and add an "active" class to the button that 
     opened the tab 
    document.getElementById(cityName).style.display = "block"; 
    //evt.currentTarget.className += " active"; 
}