Question

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

目前，我的页面设置方式是这样当您选择“1”时，元素1会显示出来。选择“4”时，元素4显示出来。

<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中一样。

基于下拉值显示元素数量的问题

1 个答案: