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

【问题标题】：Hide/Show Content Based On Dropdown Selection根据下拉选择隐藏/显示内容
【发布时间】：2020-12-02 12:58:23
【问题描述】：

如何根据这个具体示例中的下拉选择来更改内容？

这是我尝试过的：

  <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,120,.5);
}

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

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

.members-row {
    display: none;
}

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

它似乎根本没有开火。感谢您为我指明正确方向的任何帮助。

【问题讨论】：

您的changeFunc() 确实触发了，但您对selectedValue 无能为力

标签： javascript html jquery css drop-down-menu

【解决方案1】：

你可以这样使用：

$('.members-row').hide();
$('.' + selectedValue +'-members').show();

如果你想要它在 javascript 中：

var hideele = document.querySelectorAll('.members-row');
for (var i = 0; i < hideele.length; i++) {
  hideele[i].style.display = 'none';
}
document.querySelectorAll('.' + selectedValue + '-members')[0].style.display = 'block';

演示

function changeFunc() {
  var selectBox = document.getElementById("selection-of-area");
  var selectedValue = selectBox.options[selectBox.selectedIndex].value;
  $('.members-row').hide();
  $('.' + selectedValue +'-members').show();
}

.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, 120, .5);
}

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

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

.members-row {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selection-of-areas" id="selection-of-area" onchange="changeFunc();">
  <option value="illinois">Illinois</option>
  <option value="florida">Florida</option>
</select>


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

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

【讨论】：

【解决方案2】：

您只需要一个可以在下拉列表更改时触发的函数。

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


// get the value
var activeClassText = 'active';
  $('.members-row').removeClass(activeClassText); // hide others
  $("."+selectedValue+'-members').addClass(activeClassText); // show only which is selected

}

【讨论】：