Php 使下拉菜单像标签一样工作

我有5个表格，我想从一个页面上的下拉框中选择。我需要它的工作方式与选项卡的工作方式相同，只是有一个下拉框。有人能给我指一下这项工作的方向吗

我想再次单击下拉框以显示选项卡内容。。。但是没有标签按钮

-查德

函数openCityevt，cityName{ //声明所有变量 var i，tabcontent，tablinks； //获取class=tabcontent的所有元素并隐藏它们 tabcontent=document.getElementsByClassNametabcontent； 对于i=0；i 巴黎 巴黎是法国的首都

东京 东京是日本的首都

---

您必须在HTML和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";
}

我在下面做了这些修改

//下面是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";
}