Question

我想要一个下拉选择菜单，根据值显示文本框：

var showDiv = function(goal){  
    var count = 1;  
    $('.myDIV').each(function(){  
    if(count <= goal){  
    $(this).show().nextAll('.group').hide()  
    }  

        count = count +1  
    });  
};  

var goal = $('#mySelect').val();  
showDiv(goal)  

$('#mySelect').change(function(){  

       showDiv($(this).val())   
});

我正在尝试，但它不起作用，这里是 - http://jsfiddle.net/jdveR/

我想要的是什么;

如果选择1;显示1 div 如果选择2;显示1和2 div 如果选择3;显示1,2和3 div就是这样。

非常感谢任何帮助。感谢

Answer 1

您可以使用:lt()选择器。您无需首先迭代元素。

这将根据div的索引选择divs。

var showDiv = function (goal) {
    $('.myDIV').hide();
    $('.myDIV:lt(' + goal + ')').show();
};

$('#mySelect').change(function () {
    showDiv($(this).val())
}).change();

<强> Check Fiddle

Answer 2

像这样：http://jsfiddle.net/jdveR/10/

var showDiv = function(goal){
    $('.myDIV').hide();
    var count = 1;  
    $('.myDIV').each(function(){  
        if(count <= goal){  
            $(this).show().nextAll('.group').hide()  
        }
       count = count +1; 
});  
};  

var goal = $('#mySelect').val();  
showDiv(goal);

$('#mySelect').on('change', function(){ 
       showDiv($(this).val());
});

Answer 3

如果您想将数据与设计分开，那么您可以尝试将data-goal="x"添加到您的div并将您的javascript更改为：

HTML：

<div class="myDIV" id="div1" data-goal="1">Div1</div>  
<div class="myDIV" id="div2" data-goal="2">Div2</div>  
<div class="myDIV" id="div3" data-goal="3">Div3</div>  
<div class="myDIV" id="div4" data-goal="4">Div4</div>  
<div class="myDIV" id="div5" data-goal="5">Div5</div>

的Javascript

var showDiv = function(goal){  
    $('.myDIV').hide().each(function(){
      if( $(this).attr('data-goal') <= goal )
         $(this).show();
    });
};  

var goal = $('#mySelect').val();  
showDiv(goal)  

$('#mySelect').change(function(){  
       showDiv($(this).val())   
});

根据选择值显示/隐藏div

3 个答案: