How to make select onchange event happen when page loads?

Question

The code (below) works fine when the user chooses a dropdown option, but the first option is populated by php based on previous pages. How can I get the onchange event for the select to happen when the page loads, picking up the php added value and acting on it?

<?php
$value = $_GET["value"];
if (!$value){
    $value = 'Y';
}
?>
<html>
<head>
<style>
.inv {
    display: none;
}
</style>
<script>
function jb(){
    document.getElementById("target").value = "Y";
    document.getElementById("target").onchange();
}
window.onload = jb;
</script>
</head>
<body>
See more?&nbsp
<select name='see_more' id='target'>
    <option value='<?php echo $value; ?>'><?php echo $value; ?></option>
    <option value='Y'>Y</option>
    <option value='N'>N</option>
</select>
<div id="Y" class='inv'>
Additional content goes here
</div>
<script>
        document
                .getElementById('target')
                .addEventListener('change', function () {
                        'use strict';
                        var vis = document.querySelector('.vis'),
                                target = document.getElementById(this.value);
                        if (vis !== null) {
                                vis.className = 'inv';
                        }
                        if (target !== null ) {
                                target.className = 'vis';
                        }
                });
</script>
</body>
</html>

possible duplicate of [How to trigger event in JavaScript?](http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript) — cmorrissey, Mar 26 '15 at 18:57
It may be what I need but I didn't find it self explanatory and wouldn't know where to include it in my code or how to adapt it. Any pointers would be helpful. I use very little JavaScript and what I do use is copied from examples I have found on the internet. — John_F, Mar 26 '15 at 19:10
You could try placing a normal default disabled option in your Select, so that's what it starts as. Then your Option that is populated by your PHP, have it check if there is Data and if there is, set the Option as 'selected.' Then just use jQuery to utilize the change event, and execute your other code from there. This way it'll actually change the option, and allow it to trigger a change event. — Fata1Err0r, Mar 26 '15 at 19:18
@Fred I added the following code to my head but it doesn't work. Any suggestions? — John_F, Mar 26 '15 at 21:41

score 1 · Accepted Answer · answered Mar 27 '15 at 08:32

I managed to find a solution using php:

<?php
$value = $_GET["value"];
if (!$value){
        $value = 'Y';
}
?>
<html>
<head>
<style>
.inv {
        display: none;
}
</style>
</head>
<body>
See more?&nbsp
<select name='see_more' id='target'>
        <option value='<?php echo $value; ?>'><?php echo $value; ?></option>
        <option value='Y'>Y</option>
        <option value='N'>N</option>
</select>
<?php
if ($value == 'Y'){
        echo "<!--";
}
?>
<div id="Y" class='inv'>
<?php
if ($value == 'Y'){
        echo "-->";
}
?>
<?php
if ($value == 'N'){
        echo "<!--";
}
?>
<div id="Y" class='vis'>
<?php
if ($value == 'N'){
        echo "-->";
}
?>
<br>
Additional content goes here
</div>
<script>
        document
                .getElementById('target')
                .addEventListener('change', function () {
                        'use strict';
                        var vis = document.querySelector('.vis'),
                                target = document.getElementById(this.value);
                        if (vis !== null) {
                                vis.className = 'inv';
                        }
                        if (target !== null ) {
                                target.className = 'vis';
                        }
                });
</script>
</body>
</html>

score 0 · Answer 2 · answered Mar 26 '15 at 18:58

0

If you are using jQuery, you could just do $('#target').change();. So:

$(document).ready(function () {
    $('#target').change();
});

answered Mar 26 '15 at 18:58

KJ Price

5,774
3
21
34

I got the script bit at the bottom off the internet. It doesn't say whether it's JavaScript or jQuery. Can you tell by looking at it? I was prompted for the tag and so added it just in case. – John_F Mar 26 '15 at 19:03
Oh man. Yeah, this is all just vanilla javascript. I highly recommend taking the time to read up on javascript and how it works. Honestly, it is really worth knowing. If you did not add a jQuery js file, then you do not have jQuery setup. – KJ Price Mar 26 '15 at 19:07
Thanks, I should remove the jQuery tag if I can. – John_F Mar 26 '15 at 19:14

How to make select onchange event happen when page loads?

2 Answers2