Javascript onchange 表格

Question

我梦想着一个聪明的形式。示例：我在 select 框中选择选项 1，然后它将出现第二个 select 框，其中包含选项 1a 或 1b 或类似选项。但是也许如果你在第一个中使用选项 2，那么可能会出现一个文本区域来帮助获取与选项 2 匹配的信息。

我是 javascript 的新手，我问了 google 并找到了很多小例子。我现在做了类似的事情。但我不确定以这种方式工作是否是个好主意，因为这意味着我必须在第一个的值部分为第二个 select oder textarea 编写我的 html 代码.

有谁知道我应该从哪里开始或者我应该如何对我的函数进行排序？

<body>
    <select id="cms">
       <option value="Stiefmütterchen">Stiefmütterchen</option>
       <option value="Primeln">Primeln</option>
       <option value="Tulpen">Tulpen</option>
    </select>
    
    <script type="text/javascript">
       var choosenCMS = document.getElementById('cms');
       cms.onchange = function() 
       {
          var show = document.getElementById('show');
          show.innerHTML = this.value;
       }
    </script>
    
    <div id="show"></div>
    </body>

Answer 1

作为一个简单的例子，您可以通过找到第一个 select 的 value 并使用 if 语句来 show/hide 其他表单元素来做到这一点:

HTML

<select id="cms">
   <option>Choose One</option>
   <option value="one">One</option>
   <option value="two">Two</option>
   <option value="three">Three</option>
</select>    

<select id="more">
   <option value="one-a">One A</option>
   <option value="two-b">Two B</option>
   <option value="three-c">Three C</option>
</select>

<textarea></textarea>

JS

$("#cms").change(function(){
   var grabVal = $(this).val();
    if(grabVal == "one"){
       $("#more").show();
        $("textarea").hide();
    }else if(grabVal == "two"){
        $("textarea").show();
       $("#more").hide();
    }else{
        $("textarea").hide();
       $("#more").hide();           
    }
});

CSS

#more, textarea{
   display: none;
}

FIDDLE

Javascript onchange 表格

Javascript onchange Form

html

javascript

forms

jquery