动态表单不起作用

时间:2012-10-28 06:39:17

标签: 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>

1 个答案:

答案 0 :(得分:2)

尝试

<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