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都显示为none。我需要显示与所选选项值相同的类的div。

任何想法如何使用jQuery？

到目前为止我的进展：

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

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

Answer 1

你可以尝试：

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

})

DEMO

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等于选择框的选定值的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();
        }
    }
});

然后只需复制那个选择的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();
        }
    }
});

jQuery show div与选定的下拉值具有相同的类

3 个答案: