Question

我正在做一个脚本，它在select上显示不同的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

现在它只显示我选择的号码。

Answer 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的所有div上运行chosen_nr。

演示 here

Answer 2

$('#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');
});

Answer 3

$("select").change(function()
{
    currentID = $(this).val();
    $(".class").hide().each(function() {
        if($(this).attr("id") <= currentID)
            $(this).show();
    });
});

Answer 4

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

$("select").change(function() {
   var index = $(this).prop("selectedIndex");
   $('.class').hide().filter(':lt(' + index + ')').show();
});

Answer 5

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

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';
}

FIDDLE

显示ID在特定数字下的所有ID

5 个答案:

演示 here