使下拉工作像标签

Question

我有5种形式，我希望从单个页面上的下拉框中进行选择。我需要它以与制表符相同的方式工作，除了下拉框。有人请指出我的方向来完成这项工作吗？

我想在下拉框中点击以显示tabcontent ...但没有标签按钮。

-Chad

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

会有一些改变，你将不得不在你的HTML和JavaScript代码来执行。

我做了以下

这些变化//下面是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> 

//这里是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"; 
}