1

我想显示 2x 下拉菜单，两者都将预先填充（第二个菜单“mainToon”将包含 200 多个名称，但对于示例我只展示了几个。

<select id="category" name="Category">
    <option value=" "></option>
    <option value=" ">-----------------</option>
    <option value="Main Toon">Main Toon</option>
    <option value="Alt Toon">Alt Toon</option>
    <option value="Cyno Toon">Cyno Toon</option>
    <option value="Super Toon">Super Toon</option>
    <option value="Dust Toon">Dust Toon</option>
</select>

<select id="mainToon" name="mainToon">
    <option value=" "></option>
    <option value=" ">-----------------</option>
    <option value="Agmar">Agmar</option>
    <option value="S Tein">S Tein</option>
    <option value="Karades">Karades</option>
    <option value="Bad Kharma">Bad Kharma</option>
    <option value="Ed jeni">Ed Jeni</option>
</select>

默认情况下，第一个下拉菜单将显示为空白，我希望隐藏“mainToon”下拉菜单，直到选择以下任何一项：

“Alt Toon”、“Cyno Toon”、“Super Toon”、“Dust Toon”

然后表格将是可见的。

我可以通过将 .hidden css 代码应用于下拉列表并在选择其他选项时动态更改类来做到这一点吗？

非常感谢您的帮助。

4

2 回答 2

4

首先隐藏您的下拉列表：-

<select id="mainToon" name="mainToon" style="display:none;">
</select>

并像这样使用 Jquery 显示隐藏功能：-

$(document).ready(function(){
    $("#category").change(function(){
       var value = $(this).val();
        if(value=="Alt Toon" || value=="Cyno Toon")
        {
            $("#mainToon").show();
        }
        else 
        {
           $("#mainToon").hide();
        }
    });
});
于 2013-02-21T11:55:24.453 回答
1

下面演示如何根据选择值显示 DIV，

    $(function() {
    $('#colorselector').change(function(){
          $('.colors').hide();
          $('#' + $(this).val()).show();
      });
    });

这是工作演示。

于 2013-02-21T11:56:47.333 回答