onload事件后调用函数

Question

I have the following problem which I don't know how to solve. 我有以下问题，但我不知道该如何解决。

There are two select elements on the page. 页面上有两个选择元素。 On the first one options are static and the second have a dynamic elements which are changed based on selection in the first one. 在第一个选项上是静态的，第二个选项具有动态元素，这些元素根据第一个选项的选择而改变。 On onload event function is called that is filling options in the second select elements. Onload事件被调用，该函数在第二个select元素中填充选项。

Values from select element are inside form and these values need to be saved after form submit (page will be refreshed) so the selected options can be preserved. select元素中的值位于表单内部，并且这些值需要在表单提交后保存（页面将刷新），以便可以保留所选的选项。 I'm saving previous values in $_POST variable and setting options with function that is called on form submit. 我将先前的值保存在$ _POST变量中，并使用在表单提交上调用的函数设置选项。

Problem is that the function for selecting options is called before onload event. 问题是在onload事件之前调用了用于选择选项的函数。 Function called on onload event overwrites selected option and the first option is always selected. 在onload事件上调用的函数将覆盖所选选项，并且始终选择第一个选项。

Any idea how to solve this? 任何想法如何解决这个问题？

<!doctype html>
<html lang="en">
<head>    
    <meta charset = "utf-8">
    <link href="style/styleFTT.css" rel="stylesheet" type="text/css"> 

    <script type="text/javascript">
        //php code: echo "var operatorPositions = $jsonOperatorPositions; \n";


        function updateOperatorPositions(){
            lineId = document.getElementById("line");
            selectedValue = lineId[lineId.selectedIndex].text;
            var operatorPositionSelect = document.getElementById("operatorPositions");

            operatorPositionSelect.options.length = 0; //emprty previous options from selection

            // fill the selection with new options
            var j = 0;        
            for (var i = 1; i<operatorPositions.length; i++){
                if (operatorPositions[i]["line"] == selectedValue) {
                    operatorPositionSelect.options[j] = new Option(operatorPositions[i]["positionOfOperator"], operatorPositions[i]["positionOfOperator"]);
                    j += 1;
                }
            }
            console.log('Refreshed field in the SECOND select element');
        }    

        function showMenu(elmnt) {
            document.getElementById(elmnt).style.display="block";
        }
        function hideMenu(elmnt) {
            document.getElementById(elmnt).style.display="none";
        } 

        function setSelectOption(ElementID, Value){
            console.log('Setting the new option. '+'ElementID: '+ElementID+ " Value: "+Value);
            document.getElementById(ElementID).value = Value; 
        }
    </script>


</head>


<body onload="updateOperatorPositions()">
<div class="wrap">
    <?php include'includes/header.php'?> 
    <div class="main">
        <form method="post" >  

            <!-- --------------------------  TABLE FOR SELECTING POSITION ---------------------------------->    
            <h5>1. Step</h5>
            <table id="selectPosition">
                <tr>
                    <th>Select line</th>
                    <th>Select operators position</th>
                    <th></th>
                </tr>             
                <tr>
                    <td>
                        <select name="lineTitle" id="line" onchange="updateOperatorPositions()">
                            <option value="UP15" selected >UP15</option>
                            <option value="UP15 Rotor">UP15 Rotor</option>
                            <option value="UP15 Stator line 3">UP15 Stator line 3</option>
                            <option value="UP26">UP26</option>
                            <option value="UP26 Rotor">UP26 Rotor</option>
                            <option value="UP26 Stator">UP26 Stator</option>
                            <option value="Niro" >Niro</option>
                            <option value="Sololift">Sololift</option>
                            <option value="Composit">Composit</option>
                        </select>
                    </td>
                    <td>
                        <select name="opPos" id="operatorPositions" >
                               // filled with javascript function
                        </select>                    
                    </td>
                    <td ><input type="submit" name="submitPosition" value="Select" style="width:10em;"> </td>
                </tr>
            </table>
            <!-- ---------------------------------------------------------------------------------------->

            <!-- --------------------------  TABLE FOR REMOVING ERROR ----------------------------------->
            <h5 id="title2b" style="display:none;">2.b Step (in case that you want to delete exsiting one)</h5>
            <table id="ErrorList" style="display:none">

                    // This is called on submit button    
                    <script> 
                            showMenu("ErrorDetails"); showMenu("ErrorList"); showMenu("title2b"); showMenu("title2a"); 
                            setSelectOption("line", <?php echo $LINE; ?>);
                            setSelectOption("operatorPositions", <?php echo $OP_POS; ?>);                            
                    </script>

            </table>
        </form>
   </div>
</div>
</body>




</html>

Answer 1

Try this 尝试这个

window.onload = function() { 
   // page loaded
};

Or in jQuery 或在jQuery中

$(window).load(function(){
    // page loaded
});

Or as an inline event on the body element 或作为body元素上的内联事件

<body onload="runOnloadFn();">

Answer 2

I'd put the code from inline script to a function, and call it at the end of updateOperatorPositions() . 我将代码从内联脚本放到函数中，并在updateOperatorPositions()的末尾调用它。 If there's some variable(s), which is not defined at the first invoke, you can put the function call in an if(){} , and check everything needed is available. 如果有一些变量在第一次调用时未定义，则可以将函数调用放在if(){} ，并检查所需的一切是否可用。

onload事件后调用函数

问题描述

2 个解决方案

解决方案1
0 2014-02-18 08:20:31

解决方案2
0 已采纳 2014-02-18 09:50:43

onload事件后调用函数

问题描述

2 个解决方案

解决方案1 0 2014-02-18 08:20:31

解决方案2 0 已采纳 2014-02-18 09:50:43

解决方案1
0 2014-02-18 08:20:31

解决方案2
0 已采纳 2014-02-18 09:50:43