javascript - 选择菜单选项以显示内容仍然无法正常工作

Question

我正在选择选项中制作菜单。So basically this is a menu that when menu is selected will display the menu content.

我已经通过点击触发器实现了它，但它仍然无法正常工作。谁能帮我？

function detail(id) {
   $(".content-section").removeClass('shown');
   $("#"+id).addClass('shown');
}

.content-section{
  display:none;
}

.content-section.shown{
  display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select__wrapper">
   <option value="banking" onchange="detail('banking')" selected>Banking</option>
   <option value="finance" onchange="detail('finance')">Finance</option>
   <option value="manufacture" onchange="detail('manufacture')">Manufacture</option>
</select>

<div class="content-section shown" id="banking">
  For Banking
</div>
<div class="content-section" id="finance">
  For Finance
</div>
<div class="content-section" id="manufacture">
  For Manufacture
</div>

标签： javascriptjquery

Answer 1

$('.select__wrapper').on('change', (e) => {
  $(".content-section").removeClass('shown');
  $("#" + e.target.value).addClass('shown')
})

.content-section {
  display: none;
}

.content-section.shown {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select__wrapper">
  <option value="banking" selected>Banking</option>
  <option value="finance">Finance</option>
  <option value="manufacture">Manufacture</option>
</select>

<div class="content-section shown" id="banking">
  For Banking
</div>
<div class="content-section" id="finance">
  For Finance
</div>
<div class="content-section" id="manufacture">
  For Manufacture
</div>