javascript - How to trigger onchange when the page load - Stack Overflow

admin管理员组

文章数量:1287932

I want to trigger on change event when the page load I tried to do $("#formtype").change(); but it doesn't work

<div class="form-group">
  <select name="form" id="formtype" class="form-control">
    <option value="A">Form A</option>
    <option value="B">Form b</option>
</select>

<script type="text/javascript" src=".min.js"></script>
<script type="text/javascript">
  $('#formtype').on('change', function () {
    //  alert( this.value ); // or $(this).val()
    if(this.value == "A") {
      $('#form1').show();
      $('#form2').hide();
    } else {
      $('#form1').hide();
      $('#form2').show();
    }
  }); 
</script>

I want to trigger on change event when the page load I tried to do $("#formtype").change(); but it doesn't work

<div class="form-group">
  <select name="form" id="formtype" class="form-control">
    <option value="A">Form A</option>
    <option value="B">Form b</option>
</select>

<script type="text/javascript" src="http://code.jquery./jquery.min.js"></script>
<script type="text/javascript">
  $('#formtype').on('change', function () {
    //  alert( this.value ); // or $(this).val()
    if(this.value == "A") {
      $('#form1').show();
      $('#form2').hide();
    } else {
      $('#form1').hide();
      $('#form2').show();
    }
  }); 
</script>

• javascript
• ajax

Share Improve this question Follow edited Jan 28, 2016 at 22:46 Dmitriy 5,5651212 gold badges2727 silver badges3939 bronze badges asked Jan 28, 2016 at 22:39 Ahmed Imad TouilAhmed Imad Touil 9322 gold badges22 silver badges99 bronze badges 1

• Why do you want to trigger a change event? What are you trying to achieve? – David Commented Jan 28, 2016 at 22:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Don't try to trick the DOM into thinking that an event has occurred. If you want to execute code when the page loads, just execute it. Something like this:

// define the function
var toggleElements = function () {
    if($('#formtype').val() == "A") {
        $('#form1').show();
        $('#form2').hide();
    } else {
        $('#form1').hide();
        $('#form2').show();
    }
};

// set the handler
$('#formtype').on('change', toggleElements);

// execute the function when the page loads
$(document).ready(toggleElements);

Why not put it the code you want to run in a function, then call that function? Something like this will work:

$('#formtype').on('change', function() {
  doStuff();
}); 

function doStuff() {
  if($('#formtype').val() == "A") {
    $('#form1').show();
    $('#form2').hide();
  } else {
    $('#form1').hide();
    $('#form2').show();
  }
}

$(document).ready(function() {
    doStuff();

})

See it working here: https://jsfiddle/5jLx6q8b/

try to execute this code inside the document ready event's function:

$("#formtype").trigger('change');

You can do it directly in the binding of the events

$('#formtype').on('change', function () { }).trigger("change");

or

$('#formtype').on('change', function () { }).change();

本文标签： javascriptHow to trigger onchange when the page loadStack Overflow