Reloading option values with php or javascript

Here another possibility to use.

        <script language='javascript'>
        var kinderen = new Array();
        var babys = new Array();
        var max_aantal = 6;
            function getPersonen(sParentBox, sChildBox){
                //get the value of the selected option

                var sParentValue = document.getElementById(sParentBox).value;

                max_aantal =max_aantal - sParentValue;
                alert(max_aantal);
                //load the appropriate event list to the option box
                 var theSel  = document.getElementById(sChildBox);

                //clear previous options
                theSel.options.length = null;


                //handle if there is no value
                if (sParentValue == ''){alert("exiting"); return;}
                  if (sParentBox == "dpl_volwassenen") {

                      for(i=0; i<=max_aantal;i++){
                            kinderen.push(i);
                          }
                    oTargetArray = kinderen;
                    }else if(sParentBox == "dpl_kinderen"){
                        for(i=0; i<=max_aantal;i++){
                            babys.push(i);
                          }
                      oTargetArray = babys;
                    }

  //split the array values by the separator
 // var arrList     = oTargetArray[sParentValue].split(",");
 alert(oTargetArray.length);
//loop thru the array of options to add them to the dropdown
for (x=0; x < oTargetArray.length; x++)
  {
    var newOpt     = new Option(oTargetArray[x], oTargetArray[x]);//(theText,theValue);
    var selLength  = theSel.length;
    theSel.options[selLength] = newOpt;
  }//next
}//end func

</script>

What is $int_aantal? PHP? Well, your browser cant know this. <?= $int_aantal; ?> should help you. <?= starts PHP Parsing + echos the variable.

Well, if you want to do it in pure JS, what I would recommend, there is no $ vor variables. Just inialize it: var int_aantal; and then you can work with this. But beware of the JS scoping, it's not like PHP.

Use the onchange event of your selects, add all active values and then CHANGE the unchanged select

I hope this is OK as a roadmap for you.

Are you after something like this?

<script type="text/javascript">

  window.onload = function () {
    // Assign events in window.onload

    // Get references to all the <select>s
    volwassenenSelect = document.getElementById('dpl_volwassenen');
    kinderenSelect = document.getElementById('dpl_kinderen');
    babysSelect = document.getElementById('dpl_babys');

    volwassenenSelect.onchange = function () {
      var kOldSelected, bOldSelected, i, newOption;
      // Get the values of the other two selects
      kOldSelected = kinderenSelect.selectedIndex;
      bOldSelected = babysSelect.selectedIndex;
      // When volwassenen is changed, you need to update the other lists
      if (kinderenSelect.options.length > 0) {
        // kinderenSelect already has some options
        if (kinderenSelect.options.length < volwassenenSelect.selectedIndex + 1) {
          // we are adding more options
          for (i = kinderenSelect.options.length; i <= volwassenenSelect.selectedIndex; i++) {
            kinderenSelect.options[i] = new Option(i, i);
          }
        } else {
          // we are removing some options
          if (kOldSelected > volwassenenSelect.selectedIndex) {
            // if the selected option was greater than the number of new options, set it to the last option
            kinderenSelect.selectedIndex = volwassenenSelect.selectedIndex;
          }
          for (i = kinderenSelect.options.length - 1; i > volwassenenSelect.selectedIndex; i--) {
            kinderenSelect.removeChild(kinderenSelect.options[i]);
          }
        }
      } else {
        // kinderenSelect has no options yet, add volwassenenSelect.selectedIndex options
        for (i = 0; i <= volwassenenSelect.selectedIndex; i++) {
          kinderenSelect.options[i] = new Option(i, i);
        }
      }
      if (babysSelect.options.length > 0) {
        // babysSelect already has some options
        if (babysSelect.options.length < volwassenenSelect.selectedIndex + 1) {
          // we are adding more options
          for (i = babysSelect.options.length; i <= volwassenenSelect.selectedIndex; i++) {
            babysSelect.options[i] = new Option(i, i);
          }
        } else {
          // we are removing some options
          if (bOldSelected + kinderenSelect.selectedIndex > volwassenenSelect.selectedIndex) {
            // make sure the total of kinderenSelect + babysSelect does not excede volwassenenSelect
            babysSelect.selectedIndex = volwassenenSelect.selectedIndex - kinderenSelect.selectedIndex;
          } else if (bOldSelected > volwassenenSelect.selectedIndex) {
            // if the selected option was greater than the number of new options, set it to the last option
            babysSelect.selectedIndex = volwassenenSelect.selectedIndex;
          }
          for (i = babysSelect.options.length - 1; i > volwassenenSelect.selectedIndex; i--) {
            babysSelect.removeChild(babysSelect.options[i]);
          }
        }
      } else {
        // babysSelect has no options yet, add volwassenenSelect.selectedIndex options
        for (i = 0; i <= volwassenenSelect.selectedIndex; i++) {
          babysSelect.options[i] = new Option(i, i);
        }
      }
    };

    // These two functions make sure the total of kinderenSelect + babysSelect does not excede volwassenenSelect
    kinderenSelect.onchange = function () {
      if (babysSelect.selectedIndex > volwassenenSelect.selectedIndex - kinderenSelect.selectedIndex) {
        babysSelect.selectedIndex = volwassenenSelect.selectedIndex - kinderenSelect.selectedIndex;
      }
    };
    babysSelect.onchange = function () {
      if (kinderenSelect.selectedIndex > volwassenenSelect.selectedIndex - babysSelect.selectedIndex) {
        kinderenSelect.selectedIndex = volwassenenSelect.selectedIndex - babysSelect.selectedIndex;
      }
    };

  };    

</script>
<table>
  <tr>
    <td>Volwassenen</td>
    <td>
      <select id="dpl_volwassenen" name="dpl_volwassenen">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Kinderen</td>
    <td>
      <select id="dpl_kinderen" name="dpl_kinderen"></select>
    </td>
  </tr>
  <tr>
    <td>Babys</td>
    <td>
      <select id="dpl_babys" name="dpl_babys"></select>
    </td>
  </tr>
</table>