Javascript 选择“使用数据属性更改”

我有以下小提琴：

这是我的html：

<article>
  <select>
    <option name='First' value='first'>First</option>
    <option name='Second' value='second'>Second</option>
    <option name='Third' value='third'>Third</option>
  </select>
  <div data-name='first' class='show'>
    This one should show by default.
  </div>
  <div data-name='second'>
    only visible when "second" is selected
  </div>
  <div data-name='third'>
    only visible when "second" is selected
  </div>
</article>

弗斯特
第二
第三
默认情况下应该显示这个。
仅在选择“秒”时可见
仅在选择“秒”时可见

基本上，我希望在默认情况下显示第一个div，但是当您将select更改为second或third时，我希望它更改为该div

我意识到我可以用if语句轻松实现这一点，但我可能有很多选择选项，所以我希望有一个更干净的解决方案。或者这是唯一的办法吗？

试试这个

$(function () {
    $("select").on("change", function () {
        $('.show').removeClass('show');
        $('div[data-name="' + $(this).val() + '"]').addClass('show');
    });
});

演示：

这里有一把小提琴：

jQuery

$(function () {
    $("select").change(function () {
        $('.show').removeClass('show').addClass('noshow');
        var getValue = $("select option:selected").val();        
            $("#" + getValue).removeClass('noshow').addClass('show');
    });
});

---

如果我想拥有多个，例如：，它会同时改变两个？@Muhambi-yes。如果不想同时更改两个div，可以使用以下代码

.show {
    display: block;
}
.noshow {
    display:none;
}

$(function () {
    $("select").change(function () {
        $('.show').removeClass('show').addClass('noshow');
        var getValue = $("select option:selected").val();        
            $("#" + getValue).removeClass('noshow').addClass('show');
    });
});