Question

我梦想着一个聪明的形式。示例：我在选择框中选择选项1然后它将出现第二个选项框，其中包含选项1a或1b或类似选项。但也许如果你在第一个使用选项2，那么也许textarea似乎有助于获得与选项2匹配的信息。

我是javascript的新手，我问谷歌，发现了很多小例子。我现在做了类似的事情。但是我不确定这是否是一个以这种方式工作的好理想，因为这意味着我必须在第一个的值部分为第二个选择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

作为一个简单的示例，您可以通过查找第一个value的{{1}}并使用select语句来显示/隐藏其他表单元素来执行此操作：

<强> HTML

if

<强> JS

<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>

<强> CSS

$("#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();           
    }
});

FIDDLE

Javascript onchange表单

1 个答案: