如何触发的onchange当页面加载

Question

我想触发更改事件当页面加载我试图做$("#formtype").change();，但它不工作

<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.com/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> 

Answer 1

不要试图给DOM欺骗，以为事件已经发生。如果你想在页面加载时执行代码，只需执行它。事情是这样的：

// 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); 

Answer 2

为什么不把你想要运行的代码在一个函数中，然后调用该函数？像这样将工作：

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

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

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

}) 

看到它在这里工作：https://jsfiddle.net/5jLx6q8b/

Answer 3

尝试执行文档准备事件的功能在这个代码：

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

Answer 4

您可以在事件

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

或

的结合直接去做

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