Question

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

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

此外，当我选择免费时，只有其中一个框隐藏，我希望它们都隐藏，最后如果我选择免费然后选择付费，它根本不显示第一个框。

我是否需要为每个表单元素单独使用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>

Answer 1

您不能在HTML中拥有2个具有相同ID的元素。你可以把所有＆＃39;付费＆＃39;在一个<div id="paid">内填写表单元素，或将它们分开并改为使用<div class="paid">。

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

看看这个JSFiddle

显示表单字段取决于下拉框选择

1 个答案: