javascript - 动态表单不起作用

标签 javascript jquery html

我今天早些时候在这里问了一个问题,并被引导使用 jQuery 来解决问题。我是 jQuery 新手,但遵循引用并创建了以下代码。它可以在 jsFiddle 中运行,但不能在我的 Firefox 浏览器中运行。 jQuery 指向正确的路径和正确的文件名。这是在我的本地服务器上,尽管我认为这并不重要。我想根据从下拉列表中选择的值隐藏取消隐藏输入表单有人能告诉我为什么这不起作用吗?

        <html>
    <style>
    .hidden {
        display: none;
    }
    </style><!--end css-->

    <script type="text/javascript" src="jquery.js"> </script>

    <script type="text/javascript">
    $('#payment_type').on('change', function() {
        var val = $(this).val();
        $('#nvendor').hide();
    });
    </script>

    </head>
    <body>

    <h3>Select</h3>
    <select id="payment_type" name="payment_type">
       <option>Select a payment type...</option>
       <option value="nvendor">Add</option>
       <option value="PayPal">Update</option>
    </select>

    <form id="nvendor" class="hidden">
    Company: <input type="text" />
    Address Available: <input type="text" />
    Minimum Delivery Amount: <input type="text"/>
    Logo: <input type="text" />
    <input type="submit" name="submit" value="Next" />
    </form>

    </body>
    </html>

最佳答案

尝试

<script type="text/javascript">
    $(document).ready(function(){
      $('#payment_type').on('change', function() {
        var val = $(this).val();
         if(val == "nvendor")
           $('#nvendor').hide();
        else
           $('#nvendor').show();
     });
    })
</script>

并从表单中删除类.hidden

关于javascript - 动态表单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13106910/

相关文章:

javascript - 在 Javascript 或 jQuery 中,如何检测字符串开头的空格?

javascript - 主干模型设置值不会触发更改事件

javascript - 使用 jQuery 从 JS 数组动态创建 HTML 表

javascript - 来自 iframe 的 AJAX 请求,为什么来源是父级的 URL?

JavaScript/HTML : How to use window. onload=x 连同主体 onLoad ="setTimeout(' myFunction( )',4000);"

jquery - 如何制作可点击的图像以打开带有消息的新选项卡

javascript - 如何测试 css(3) 样式属性值支持、重复值支持?

javascript - 为什么 javascript onclick div 幻灯片不起作用?

javascript - 在 JavaScript 中自动从字符串中删除 '&' 符号

javascript - 如何 Onload() 将焦点设置到 jQuery Handsontable