0

我正在做一个脚本，它在选择时显示不同的 div 相等。

    <select name="amount" id="amount" >
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    </select>
    <div class="class" id="1">test</div>
    <div class="class" id="2">test2</div>
    <div class="class" id="3">test3</div>
    <div class="class" id="4">test4</div>
    <div class="class" id="5">test5</div>
    <div class="class" id="6">test6</div>
    <div class="class" id="7">test7</div>
    <div class="class" id="8">test8</div>
    <input type="submit" id="buttong" name="submit" class="rounded" value="Random" style="margin-left: 10px;">
</form>
<script>

$("select").change(
function()
{
$(".class").hide();
$(".class[id='"+this.value+"']").show();
})

</script>

我如何改变：

$("select").change(
function()
{
$(".class").hide();
$(".class[id='"+this.value+"']").show();
})

所以它会显示所有在选定项下具有 id 号的 div。

因此，例如，如果我选择数字 5，它将显示所有具有较小数字的 div，1 2 3 4 5

现在它只显示我选择的数字。

4

5 回答 5

1

尝试这个：

$("select").on('change', function () {
    var chosen_nr = this.value + 1;
    $(".class").hide();
    $(".class").each(function() {
        if (this.id < chosen_nr ) {
            $(this).show();
        }
    });
});

我给了一个变量chosen_nr的值select并添加了 +1，因为 jQuery 数组从0. 然后我做了一个each循环并.show()在所有id小于chosen_nr.

演示在这里

于 2013-09-01T21:15:32.333 回答
0 
$('#amount').change(function(){
    $('#amount').attr('disabled');
    var num=$(this).val();
    $('.class').each(function(){
        if($(this).attr('id')>num)
            $(this).css('display','none');
        else
            $(this).css('display','block');
    });
    $('#amount').removeAttr('disabled');
});
于 2013-09-01T21:16:59.170 回答
0

如果没有图书馆，这似乎是微不足道的事情吗？

document.getElementById('amount').onchange = function() {
  for (var i=0; i<this.options.length; i++)
    document.getElementById(i+1).style.display = i<this.value ? 'block' : 'none';
}

小提琴

于 2013-09-01T21:37:20.697 回答
0

在这种情况下不要使用 ID，使用索引：

$("select").change(function() {
   var index = $(this).prop("selectedIndex");
   $('.class').hide().filter(':lt(' + index + ')').show();
});
于 2013-09-01T21:25:36.470 回答
0 
$("select").change(function()
{
    currentID = $(this).val();
    $(".class").hide().each(function() {
        if($(this).attr("id") <= currentID)
            $(this).show();
    });
});
于 2013-09-01T21:19:14.383 回答