Question

我希望显示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”， “超级香椿”， “尘埃香椿”

然后表格将可见。

我是否可以通过将.hidden css代码应用于下拉列表并在选择其他选项时动态更改类来实现此目的？

非常感谢你的帮助。

Answer 1

首先隐藏你的下拉菜单： -

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

并使用Jquery show hide函数： -

$(document).ready(function(){
    $("#category").change(function(){
       var value = $(this).val();
        if(value=="Alt Toon" || value=="Cyno Toon")
        {
            $("#mainToon").show();
        }
        else 
        {
           $("#mainToon").hide();
        }
    });
});

Answer 2

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

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

Here正在制作演示。

如何使用jquery基于select下拉列表显示textarea？

2 个答案: