Question

我有一个场景，我根据下拉列表中的选定值显示和隐藏字段。

它的工作完美，但是当它第一次加载时，它会显示所有字段的值。

所以我想在页面加载时隐藏所有值。

＆＃13;

jQuery(document).ready(function($) {
  $('select[name=mem_type]').change(function() {
    // hide all optional elements
    $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();

    $("select[name=mem_type] option:selected").each(function() {
      var value = $(this).val();
      if (value == " ") {
        $('.common-subject').hide();

      } else if (value == "Biology") {
        $('.biology-subject').show();

      } else if (value == "Maths") {
        $('.maths-subject').show();

      }

    });
  });
});

＆＃13;

<head>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
  <div id="reg_mem_type" class="form-row form-row-wide">
    <label for="reg_mem_type">Subject Type</label>

    <select id="reg_mem_type" name="mem_type">
      <option value=" "></option>
      <option value="Biology">Biology</option>

      <option value="Maths">Maths</option>

    </select>

  </div>



  <div class="common-subject biology-subject form-row form-row-wide">
    <h2>Biology</h2>
  </div>
  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_first_name">Biology</label>
    <input type="text" class="input-text" name="maths" id="reg_first_name" size="10" />
  </div>


  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_last_name">Biology1</label>
    <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" />
  </div>


  <div class="maths-subject common-subject form-row form-row-wide">

    <h2>Maths</h2>
  </div>
  <div class="common-subject maths-subject form-row form-row-wide">
    <label for="reg_website">Maths1</label>
    <input type="text" class="input-text" name="website" id="reg_website" />
  </div>
  <div class="maths-subject common-subject form-row form-row-wide">
    <label for="reg_fax">Maths2</label>
    <input type="text" class="input-text" name="fax_num" id="reg_fax" />
  </div>
</head>

＆＃13;

Answer 1

＆＃13;

jQuery(document).ready(function($) {
  $('select[name=mem_type]').change(function() {
    // hide all optional elements
    $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();

    $("select[name=mem_type] option:selected").each(function() {
      var value = $(this).val();
      if (value == " ") {
        $('.common-subject').hide();

      } else if (value == "Biology") {
        $('.biology-subject').show();

      } else if (value == "Maths") {
        $('.maths-subject').show();

      }

    });
  }).change();//manually call change event so that on load it run the change event
});

＆＃13;

<head>
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
  <div id="reg_mem_type" class="form-row form-row-wide">
    <label for="reg_mem_type">Subject Type</label>

    <select id="reg_mem_type" name="mem_type">
      <option value=" "></option>
      <option value="Biology">Biology</option>

      <option value="Maths">Maths</option>

    </select>

  </div>



  <div class="common-subject biology-subject form-row form-row-wide">
    <h2>Biology</h2>
  </div>
  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_first_name">Biology</label>
    <input type="text" class="input-text" name="maths" id="reg_first_name" size="10" />
  </div>


  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_last_name">Biology1</label>
    <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" />
  </div>


  <div class="maths-subject common-subject form-row form-row-wide">

    <h2>Maths</h2>
  </div>
  <div class="common-subject maths-subject form-row form-row-wide">
    <label for="reg_website">Maths1</label>
    <input type="text" class="input-text" name="website" id="reg_website" />
  </div>
  <div class="maths-subject common-subject form-row form-row-wide">
    <label for="reg_fax">Maths2</label>
    <input type="text" class="input-text" name="fax_num" id="reg_fax" />
  </div>
</head>

＆＃13;

致电.change()

Answer 2

只需在页面加载时触发更改事件：

＆＃13;

$('select[name=mem_type]').change(function() {
    // hide all optional elements
    $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();

    $("select[name=mem_type] option:selected").each(function() {
      var value = $(this).val();
      if (value == " ") {
        $('.common-subject').hide();

      } else if (value == "Biology") {
        $('.biology-subject').show();

      } else if (value == "Maths") {
        $('.maths-subject').show();

      }

    });
});

$('select[name=mem_type]').change(); // just trigger change event here

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="reg_mem_type" class="form-row form-row-wide">
    <label for="reg_mem_type">Subject Type</label>

    <select id="reg_mem_type" name="mem_type">
      <option value=" "></option>
      <option value="Biology">Biology</option>

      <option value="Maths">Maths</option>

    </select>

  </div>



  <div class="common-subject biology-subject form-row form-row-wide">
    <h2>Biology</h2>
  </div>
  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_first_name">Biology</label>
    <input type="text" class="input-text" name="maths" id="reg_first_name" size="10" />
  </div>


  <div class="common-subject biology-subject form-row form-row-wide">
    <label for="reg_last_name">Biology1</label>
    <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10" />
  </div>


  <div class="maths-subject common-subject form-row form-row-wide">

    <h2>Maths</h2>
  </div>
  <div class="common-subject maths-subject form-row form-row-wide">
    <label for="reg_website">Maths1</label>
    <input type="text" class="input-text" name="website" id="reg_website" />
  </div>
  <div class="maths-subject common-subject form-row form-row-wide">
    <label for="reg_fax">Maths2</label>
    <input type="text" class="input-text" name="fax_num" id="reg_fax" />
  </div>

＆＃13;

Answer 3

只需将其添加到您的代码中：

    <style>
    .common-subject{
       display:none;
    }
    </style>

其余的代码可以正常工作。

Answer 4

您还可以触发更改活动

$('select[name=mem_type]').trigger('change');

Answer 5

在更改事件功能

之前，将此行作为第一行放在就绪功能上

$('.common-subject').hide();

Answer 6

您需要做的就是在css中设置一个类，例如.dNone {display：none}，然后将此类添加到要隐藏的字段或元素中。

从您选择的内容下拉菜单后，只需从这些元素中删除.dNone：）

Answer 7

试试此代码

＆＃13;

	jQuery(document).ready(function($){

 $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();


    $('select[name=mem_type]').change(function () {
    // hide all optional elements
    $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();
        
    $("select[name=mem_type] option:selected").each(function () {
        var value = $(this).val();
        if(value == " ") {
            $('.common-subject').hide();
           
        } else if(value == "Biology") {
            $('.biology-subject').show();
           
        } else if(value == "Maths") {
            $('.maths-subject').show();
           
        }

    });
}); 
});

＆＃13;

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<div id="reg_mem_type" class="form-row form-row-wide"> <label for="reg_mem_type">Subject Type </label>

        <select id="reg_mem_type" name="mem_type">
        <option value=" "> </option>
          <option value="Biology">Biology</option>

          <option value="Maths">Maths</option>

        </select>

      </div>



<div class="common-subject biology-subject form-row form-row-wide"> 
<h2>Biology</h2></div>
<div class="common-subject biology-subject form-row form-row-wide">
<label for="reg_first_name">Biology</label>
    <input type="text" class="input-text" name="maths" id="reg_first_name" size="10"/>
</div>


<div class="common-subject biology-subject form-row form-row-wide">
<label for="reg_last_name">Biology1</label>
    <input type="text" class=" input-text" name="last_name" id="reg_last_name" size="10"/>
</div>


<div class="maths-subject common-subject form-row form-row-wide"> 

<h2>Maths</h2>
</div>
<div class="common-subject maths-subject form-row form-row-wide"> 
<label for="reg_website">Maths1</label>
    <input type="text" class="input-text" name="website" id="reg_website"/>
 </div>
<div class="maths-subject common-subject form-row form-row-wide"> 
<label for="reg_fax">Maths2</label>
    <input type="text" class="input-text" name="fax_num" id="reg_fax"/>
</div>
    </head>

＆＃13;

Answer 8

更好地将所有html包装在一个父div中并给出一个类说（parent_class）。然后给那个班级的css

display:none;

然后在窗口加载显示该类

$(window).load(function(){

$(".parent_class").show();

})

Answer 9

将要隐藏的元素放在load事件上，而不是将其放在change事件中。因此，在加载时它将隐藏所有可选元素，然后在change事件中显示您想要的元素。

jQuery(document).ready(function($) {

   // hide all optional elements
    $('.common-subject').hide();
    $('.maths-subject').hide();
    $('.biology-subject').hide();
    $('.pro-member-type').hide();

  // Now the change event.
   $("select[name=mem_type] option:selected").each(function() {
       var value = $(this).val();
       if (value == " ") {
          $('.common-subject').hide();
       } 
       else if (value == "Biology") {
          $('.biology-subject').show();
       } else if (value == "Maths") {
          $('.maths-subject').show();
       }
   });
});

我想在jquery

9 个答案: