Problems with onload changing the same selector

Problems with onload changing the same selector

Hello, I have less experience with jQuery, and now having some problems, I hope someone can help with this simple code. The purpose is to get 3 selectors updated with their corresponding values (retrieved from database), so that they can be modified and saved. 2nd selector depends on first selector value, and 3rd selector depends on 2nd selector value.

For that purpose I placed a function onload="start();" in the body section, and that start() function calls 2 other functions. I believe the problem is about event handlers but am not shure why the second part of every function does not work to select the correspondent value, until an alert(); function is active.

My code is working only if both alerts are not commented.

<script src="jquery-2.1.0.js"></script>
<script src="jquery-ui-1.10.4/ui/jquery-ui.js"></script>
<script src="jquery-ui-1.10.4/ui/i18n/jquery.ui.datepicker-es.js"></script>

<script type="text/javascript">
// This section updates values from each selectors 2nd and 3rd if some changes are made in sel1 or sel2
$(document).ready(function()
{
   $("#selector1").change(function () {
       $("#selector1 option:selected").each(function () {
            sel1=$(this).val();
            $.post("listSelector2.jsp", { sel1: sel1 }, function(data){
              $("#selector2").html(data);
              $("#selector3").html("<option value=0>Seleccionar</option>");
            });   
      });
   });
  
   $("#selector2").change(function () {
           $("#selector2 option:selected").each(function () {
                sel2=$(this).val();
                $.post("listSelector3.jsp", { sel1:sel1, sel2:sel2 }, function(data) {
                   $("#selector3").html(data);
               });           
         });
   });
});

// First function to be called as initialization after page has loaded
function fillCodigosOpera() {
    $("#selector1 option:selected").each(function () {
        sel1=$(this).val();
        $.post("listSelector2.jsp", { sel1: sel1 }, function(data){
          $("#selector2").html(data);
          $("#selector3").html("<option value=0>Seleccionar</option>");
        });   
      });
    // Retrieving value from a hidden input to be used to change/select actual value in selector2
    var str = document.getElementById('varSelector2').value;
    alert(str);
    $('#selector2').val(str);
}










































// Second function to be called as initialization after page has loaded
function fillSelector3() {
    $("#selector1 option:selected").each(function () {
        sel1=$(this).val();
    });
    $("#selector2 option:selected").each(function () {
        sel2=$(this).val();
        $.post("listSelector3.jsp", { sel1:sel1, sel2:sel2 }, function(data) {
               $("#selector3").html(data);
        });           
    });
    //  Retrieving value from a hidden input to be used to change/select actual value in selector3
    var str = document.getElementById('varSelector3').value;
    alert(str);
    $('#selector3').val(str);
}

function start() {
    fillSelector2();
    fillSelector3();
}
</script>
</head>

<body onload="start();">

...

<select name="selector2" id="selector2">
        <option value="0">Select</option>
</select>

<select name="selector3" id="selector3">
        <option value="0">Select</option>
</select>

...

</body>
</html>








































I have tried with different options arround calling functions like $(fillSelector2); but all them only work
if I use the alert(); functions.

It is very possible that there are much better and elegant code to get this working, I am shure this has allready been solved or done.

Hope to get help and fix this.

Thanks in advance.