根据下拉选择隐藏/显示内容

问题描述

在此特定示例中，如何根据下拉选择更改内容？

这是我尝试过的：

  <select class="selection-of-areas" id="selection-of-area" onchange="changeFunc();">
<option value="illinois">Illinois</option>
<option value="florida">Florida</option>
  </select>
</div>

<div class="members-row illinois-members">
 Test Illinois
</div>

<div class="members-row florida-members">
Test Florida
</div>

还有js ...

function changeFunc() {
    var selectBox = document.getElementById("selection-of-area");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
   }


(function($) {
  $('.select-button').click(function(e) {
    e.preventDefault();
    var $this = $(this),$targetRow = $this.data('target'),$activeClassText = 'active';
    $('.select-button').removeClass($activeClassText);
    $this.addClass($activeClassText);
    $('.members-row').removeClass($activeClassText);
    $('.' + $targetRow + '-members').addClass($activeClassText);
  });
})(jQuery)

和CSS：

.selection-of-areas {
    width: 100%;
    font-family: 'Josefin Sans';
    font-size: 18px;
    background: #eee;
    padding: 11px 9px 8px;
    box-shadow: 0 0 3px rgba(120,120,.5);
}

.select-area-selection {
    display: block;
}

.members-row.active {
    display: block;
}

.members-row {
    display: none;
}

我在这里创建了一个Codepen： https://codepen.io/gpercifield/pen/MWyKYeG

它似乎根本没有触发。感谢您为我指明正确方向的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）