Question

我试图创建一个下拉列表，当选择该值时，它会显示另一个表单，由于某种原因它似乎不起作用...

HTML：

<select id='purpose'>
        <option value="0">Nameglow</option>
        <option value="1">Namecolor</option>
        <option value="2">Bubbleglow</option>
        <option value="3">Bubblecolor</option>
    </select>

    <form id="nameglow">
            <input class="jscolor" type="text" name="nameglow" maxlength="6" id="color">
            <input type="button" value="Change" onclick="changeNameglow()">
    </form>

    <form id="namecolor">
        <input class="jscolor" type="text" name="namecolor" maxlength="6" id="color">
        <input type="button" value="Change" onclick="changeNamecolor()">
    </form>

JQUERY：

$('#purpose').on('change', function () {
    switch (this.value) {
            case 0:
                $("#namecolor").hide();
                $("#bubbleglow").hide();
                $("#bubblecolor").hide();
                $("#nameglow").show();
            break;
            case 1:
                $("#nameglow").hide();
                $("#bubbleglow").hide();
                $("#bubblecolor").hide();
                $("#namecolor").show();
            break;
            case 2:
                $("#namecolor").hide();
                $("#nameglow").hide();
                $("#bubblecolor").hide();
                $("#bubbleglow").show();
            break;
            case 3:
                $("#namecolor").hide();
                $("#nameglow").hide();
                $("#bubbleglow").hide();
                $("#bubblecolor").show();
            break;
    }
});

CSS：

 #nameglow {
        display:none;
    }

    #namecolor { 
        display:none;
    }

    #bubbleglow { 
        display:none;
    }

    #bubblecolor { 
        display:none;
    }

我尝试使用javascript，但我面临同样的问题..我更喜欢使用jquery，有人能告诉我我做错了什么吗？我还没有添加泡泡颜色和泡泡颜色。

Answer 1

确保您拥有对jQuery的引用，这是一个可以为其找到CDN的网站jQuery CDN

现在问题出在开关中，正确的语法是

switch($(this).val())

另一个问题是你正在检查整数值，下拉列表中的值是一个字符串/字符串，为了让它工作，你需要将它转换为int这样

switch(parseInt($(this).val()))

这是jsFiddle

Answer 2

变化：

this.value

分为：

$(this).prop('selectedIndex');

或者：

parseInt($(this).val());

这是JSFiddle

即使选择了Nameglow，它也不会初始显示任何表单，因为在更改选择选项之前，您不会检查所选值。

<强>更新

我更新了我的答案，以反映如果你想使用像Ness Rosales指出的$（this）.val（）那样需要parseInt（）。我起初并没有意识到这一点。

下拉列表选择不显示表单

2 个答案: