Javascript 显示依赖于下拉框选择的表单字段

我有一个下拉框，其中有两个值免费和付费。我想做的是，如果有人从下拉列表中选择paid，那么会显示更多表单字段

目前我有三个问题，第一个问题是，当窗体运行时，它会显示所有框，我必须选择free来隐藏它们，我想要的是窗体以free预选的方式打开

另外，当我选择“免费”时，只会隐藏其中一个框，并且我希望它们都隐藏。最后，如果我选择“免费”，然后选择“付费”，则根本不会显示第一个框

我是否需要为每个表单元素单独使用一段javascript，或者我是否可以为所有表单元素使用一段javascript，我只想在选择“付费”后显示这些表单元素

这是我的密码

   $(document).ready(function() {
   $('#listing').on('change.listing', function() {
   $("#paid").toggle($(this).val() == 'paid');
   }).trigger('change.paid');
   }); 

    <select id="listing">
      <option value="free" disabled="disabled" selected="selected">PLEASE CHOOSE</option>
      <option value="FREE">Free</option>
      <option value="PAID">Paid</option>
   </select>


  <div id="paid">
    <select name="industry" class="form-control">
      <option value="0"> -- Select Industry -- </option>
      <option value="Accounting, Banking Finance">Accounting, Banking & Finance</option>
      <option value="Administrative & Secretarial">Administrative & Secretarial</option>
    </select>
   </div>


 <div id="paid">
  <select name="industry1" class="form-control">
    <option value="0"> -- Select Industry -- </option>
    <option value="Accounting, Banking Finance">Accounting, Banking & Finance</option>
    <option value="Administrative & Secretarial">Administrative & Secretarial</option>
 </select>
</div>   

---

HTML中不能有两个id相同的元素。您可以将所有“付费”表单元素放在一个表单中，也可以将它们分开使用

至于创建最初隐藏的元素，可以向所需元素添加style=display:none属性

看看这个