Javascript 转换为 HTML 形式

标签 javascript html forms

您好,我正在尝试实现 HTML 表单。 假设它有 4 个字段 - 姓名、年龄、城市(下拉列表 - 包含 A、B、C、D)和地区。 我希望区域字段仅在所选城市为 A 或 B 时出现,如果城市更改为 C 和 D 则消失。有人可以帮忙编写 JS/Jquery 代码吗?

JsFiddle :

<!DOCTYPE HTML>
<html>
    <head>
    <title>BEAT | Login</title>
    <link rel="shortcut icon" href="images/favi.ico">
    </head>

    <body>
        <div id="login">
            <form>
                Name: <input type="text"></input>
                <br/>

                Age: <input type="text"></input>
                <br/>
                State: <select>
                          <option value="A">A</option>
                          <option value="B">B</option>
                          <option value="C">C</option>
                          <option value="D">D</option>
                        </select>
                        <br/>
                Region: <select>
                            <option value="north">North</option>
                            <option value="south">South</option>
                         </select>
            </form>
        </div>
    </body>
</html> 

最佳答案

Updated Fiddle ...

$('#region').css('display','none');
$('#state').on('change', function() {
    var state= $('#state').val();
    if(state=="A"||state=="B"){
        $('#region').css('display','block');
     }else{
         $('#region').css('display','none');
     }
});

试试这个..

关于Javascript 转换为 HTML 形式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30999945/

相关文章:

javascript - JS : Displaying html w/variables via document. 写入

javascript - 使用 Chrome 控制台通过 RequireJS 访问 Knockout ViewModel

php - 如何从 MySQL 数据库搜索和显示数据

javascript - 仅通过滚动更改涉及每个菜单项的背景图像

javascript - 拖放功能不适用于 Angular js

html - sencha touch::在列表前添加一些文本

javascript - 如何在 vuetify 弹出模式上放置要使用输入元素(v-select)固定的下拉项?

javascript - Jquery `.click` 提交所有表单

javascript - 如何仅在输入模糊时触发 react 形式 valueChanges 订阅并在 Angular 2 中输入 key

php - 如果在 Symfony 中选中了复选框,则关闭表单类型的验证