Javascript onchange 表单

标签 javascript jquery html forms

我梦想着一个聪明的人。示例:我在选择框选项 1 中选择,然后它会出现第二个带有选项 1a 或 1b 或类似选项的选择框。但是也许如果您在第一个选项中使用选项 2,那么可能会出现一个文本区域来帮助获取与选项 2 匹配的信息。

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

最佳答案

作为一个简单的例子,您可以通过找到第一个selectvalue 并使用if 语句来显示/隐藏来做到这一点像这样的其他表单元素:

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 表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27931921/

相关文章:

javascript - Node.js OpenShift EACCESS 错误

javascript - 4 个元素的高度相等

jquery - 无法使用 Ajax 和 jQuery Validate 提交表单

html - `overflow`属性 `overlay`和 `scroll`有什么区别

Javascript:字符串字符的行

javascript - 尝试使用 JavaScript 和 CSS 创建数字 3.2.1 倒计时

javascript - 使用 jQuery.ajax 发送带有数据 :image/png;base64 的 multipart/formdata

javascript - 使用 jQuery 和 Javascript 的多个 API 调用架构

javascript - 多个连续ajax请求的jquery模式

javascript - 如何通过在 div JavaScript/Jquery 外部单击来关闭菜单