onload 事件后调用函数答案

【问题标题】：Call a function after onload eventonload 事件后调用函数
【发布时间】：2014-03-17 20:20:17
【问题描述】：

我有以下问题，我不知道如何解决。

页面上有两个选择元素。第一个选项是静态的，第二个选项有一个动态元素，这些元素会根据第一个选项中的选择而改变。 onload 事件函数被调用，该函数在第二个选择元素中填充选项。

select 元素的值在表单内部，这些值需要在表单提交后保存（页面将刷新），以便保留选定的选项。我将以前的值保存在 $_POST 变量中，并使用表单提交时调用的函数设置选项。

问题是在onload事件之前调用了选择选项的函数。在 onload 事件上调用的函数会覆盖选定的选项，并且始终选择第一个选项。

知道如何解决这个问题吗？

<!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>

【问题讨论】：

你能展示你的代码吗？
你能发布你当前代码的 jsfiddle 吗？我们可以看看什么？你在使用 JS 框架，比如 jQuery 吗？
请仅发布相关的HTML和JS，PHP代码只是从您的问题中占用空间。如果它创建了我们需要知道的 HTML/JS，请将其作为 HTML 添加到问题中。
为什么不用php来设置选中元素？选择元素时，只需回显 selected 属性 (selected="selected")。
你认为我应该把它放在哪里？

标签： javascript events onload

【解决方案1】：

我会将代码从内联脚本放到一个函数中，并在updateOperatorPositions() 的末尾调用它。如果有一些变量在第一次调用时没有定义，您可以将函数调用放在if(){} 中，并检查所需的一切是否可用。

【讨论】：

【解决方案2】：

试试这个

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

或者在 jQuery 中

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

或者作为body元素的内联事件

<body onload="runOnloadFn();">

【讨论】：

我的代码中已经有了它。但时间线不好。调整所选选项的函数需要在 onload 事件调用函数之后执行。
@justRadojko 尝试在第一次选择时触发 onchange 事件。
不走运