javascript - 根据下拉值显示元素数量的问题

Question

我之前问了一个问题来解决我的困境，即如何根据下拉值显示元素的数量。例如，如果我选择“2”，则会显示 2 个 div 元素。如果您选择“3”，则会显示 3 个元素。

目前，我的页面设置为当您选择“1”时，会显示元素 1。当您选择“4”时，会显示元素 4。

Example

<select class="signupSearchModelTypeSelect" id="selectModelNumber" name="modelsCount" style="display: none;">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
</select>


<div class="signupLabelSelectContainer modelNumberAll modelNumber1">
blablabla
</div>
<div class="signupLabelSelectContainer modelNumberAll modelNumber2">
blablabla
</div>
<div class="signupLabelSelectContainer modelNumberAll modelNumber3">
blablabla
</div>
<div class="signupLabelSelectContainer modelNumberAll modelNumber4">
blablabla
</div>

.....
$(".signupSearchModelTypeSelect").chosen({
            inherit_select_classes: true,
            disable_search: true
        }).change(function(f, g) {
            if ($(this).attr("name") == "modelsCount") {
                //This section controls the dropdown
                $(".modelNumberAll").addClass("hide");
                $(".modelNumber" + $(this).val()).removeClass("hide")
            }
....

so we built something like this in JsFiddle

我修改了我的 JS，如下所示:

$(".signupSearchModelTypeSelect").chosen({
    inherit_select_classes: true,
    disable_search: true
}).change(function(f, g) {
    if ($(this).attr("name") == "modelsCount") {

    //This section controls the dropdown
    var number = $(this).val();
    $('.CommonAttribute').hide().slice( 0, number ).show();
});

And the result is that the div's don't change at all now

这有什么问题吗？谢谢!

编辑:更新了 html，将 .CommonAttribute 替换为 .modelNumberAll。

Answer 1

您实际上尚未在要显示/隐藏的项目上使用“CommonAttribute”类。 $('.CommonAttribute') 的查询结果为空。

为了确定这一点，我打开 Chrome Devtools，设置一个断点以在更改事件期间停止，更改选择框的值，然后在代码编辑器中选择“$('.CommonAttribute')”查询，右键单击它并选择“在控制台中评估”。它显示一个空结果，实际上编号元素没有此类，就像它们在 jsFiddle 中一样。