Question

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

页面上有两个选择元素。在第一个选项是静态的，第二个选项具有动态元素，这些元素根据第一个选项进行更改。 on 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>

Answer 1

试试这个

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

或者在jQuery中

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

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

<body onload="runOnloadFn();">

Answer 2

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

onload事件后调用函数

2 个答案: