jQuery显示与所选下拉值具有相同类的div

Question

我有一个下拉列表：

<select class="select_menu_type">
    <option value="value1">foo</option>
    <option value="value2">bar</option>
</select>

<div class="value1">Lorem ipsum VALUE1</div>
<div class="value2">Lorem ipsum VALUE2</div>

默认情况下，所有div都不显示。 我需要显示与所选选项值相同的类的div。

任何想法如何使用jQuery做到这一点？

到目前为止，我的进度：

jQuery('#select_order_type').change(function(){
  var selectedOption = document.getElementById('select_order_type');
  console.log(selectedOption.options[selectedOption.selectedIndex].value)
});

我需要显示div与我选择的值相同的类...

Answer 1

您可以尝试：

$('.select_menu_type ').change(function(){
    var $Select = $(this).val();
    $('div').hide();
    $('.'+$Select).show();

})

演示

Answer 2

$(function() {
   $('.select_menu_type').on('change',function() {
        var cls = this.value;
        $('div').hide();
        $('div.' + cls).show();
    });
});

为了获得更好的编码，我建议将div元素包含在另一个div或元素中，以便仅控制那些div会更容易。

Answer 3

我已经自己尝试过了，希望它是您问题的答案:)

第一次加载文档时，我们需要获取选择中有多少个选项，我们应该隐藏所有div，然后显示具有等于选择框所选值的类的div。

var optionValues = [];
$('.select_menu_type option').each(function() {
    optionValues.push($(this).val());
});

$( document ).ready(function() {
    for( var ctr = 0; ctr < optionValues.length; ctr++){
        if( $('.select_menu_type').val() === optionValues[ctr]){
            $('.'+optionValues[ctr]).show();
        }
        else{
            $('.'+optionValues[ctr]).hide();
        }
    }
});

然后只需在select的onchange内部复制ready函数：)

$('.select_menu_type').change(function(){
    for( var ctr = 0; ctr < optionValues.length; ctr++){
        if( $('.select_menu_type').val() === optionValues[ctr]){
            $('.'+optionValues[ctr]).show();
        }
        else{
            $('.'+optionValues[ctr]).hide();
        }
    }
});