Question

好的，http://jsfiddle.net/PayBt/这里显示的代码完美无缺，但我有一个问题。我的值CAN＆＃39; T是杀死代码的数字。

HTML：

<select id="additional" name="additional" value="{{course}}">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="apatient6">6</option>
</select>
        <div id="workshop1" class="formbox">stuff</div>
        <div id="workshop2" class="formbox">stuff</div>
        <div id="workshop3" class="formbox">stuff</div>
        <div id="workshop4" class="formbox">stuff</div>

JS。

$(document).ready(function () {
$('.formbox').hide();
$('#additional').change(function () {
    $('.formbox').hide();
    for (i = 1; i <= $(this).val(); i++) {
        $('#workshop' + i).show();
    }
});
});

我看到的选项是$（＆＃39;＃workshop＆＃39; + val）.show（）;而不是$（＆＃39;＃workshop＆＃39; + i）.show（）;.或者找一种方法通过选择器ID调用div。

基本上如何使用数值显示/隐藏多个div？

感谢您的帮助！

Answer 1

您可以像这样添加自定义数据属性data-value -

Html :( 与其他选项相同）

<option data-value='6' value="apatient6">6</option>

Js：

$(document).ready(function () {
    $('.formbox').hide();
    $('#additional').change(function () {
        $('.formbox').hide();
        for (i = 1; i <= parseInt($('option:selected',this).data('value')); i++) {
            $('#workshop' + i).show();
        }
    });
});

演示--> http://jsfiddle.net/PayBt/8/

Answer 2

您可以从DOM元素中获取selectedIndex，这就是它的声音。所选项目的索引。然后你可以使用jQuery中的：lt（）选择器来获取索引较低的所有元素：

$('#additional').change(function () {
    $('.formbox').hide();
    var selectedIndex = $('#additional').get(0).selectedIndex;
    $('.formbox:lt(' + selectedIndex + ')').show();
});

http://api.jquery.com/lt-selector/

示例：http://jsfiddle.net/PayBt/10/

Answer 3

假设您对所选元素的索引感兴趣，只需对现有元素进行简单的调整即可！

$(document).ready(function () {
    $('.formbox').hide();
    $('#additional').change(function () {
        $('.formbox').hide();
        //jquery api magic
        iters = $("#additional").get(0).selectedIndex;
        for (i = 1; i <= iters; i++) {
            $('#workshop' + i).show();
        }
    });
});

使用数值显示/隐藏多个div

3 个答案: