onload事件后调用函数

Question

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

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

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>

Answer 1

尝试这个

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

或在jQuery中

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

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

<body onload="runOnloadFn();">

Answer 2

我将代码从内联脚本放到函数中，并在updateOperatorPositions()的末尾调用它。 如果有一些变量在第一次调用时未定义，则可以将函数调用放在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