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

Question

我有一个下拉框，其中包含两个免费和付费的值。 我正在尝试做的是，如果有人从下拉列表中选择付费，则会显示更多表单字段。

目前我有三个问题，第一个是当表单运行时它会显示所有框，我必须选择自由隐藏它们，我想要的是表单以免费预选打开。

此外，当我选择免费时，只有一个框隐藏，

我希望它们都隐藏，最后如果我选择免费然后选择付费，它根本不显示第一个框。

我是否需要为每个表单元素提供单独的 javascript，或者我可以对所有表单元素使用一段 javascript，我只想在选择付费后显示。

http://jsfiddle.net/kLoq3xy5/

这是我的代码

   $(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>   

Answer 1

HTML 中不能有 2 个具有相同 id 的元素。您可以将所有"付费"表单元素放在一个<div id="paid">中，也可以将它们分开并改用<div class="paid">。

至于创建最初隐藏的元素，您可以将style="display:none"属性添加到所需的元素中。

看看这个JSFiddle