更改选择取决于输入值

Question

In my form i have three input and one select box ,In Select there are only three value John , Matt and Lucy, but the select box is all automatic its totally depend on Input which place above it and input have all datepicker .

when 1st input have value then Select box value should be John after this when 2nd input filled out the value will be Matt and last 3 input also get value than select should be Lucy My question is how can i populate date from database in a select when input have a value

            <form method="post" name="myform" class="compform" id="myform">
            <input type="hidden" name="UserName" value="<?php echo $_SESSION['UserName']; ?>" />
            <ul>
            <li>
              <p>Distribution Date:</p>
              <input type="text" name="DistributionDate" id="datepicker" value="" readonly />
            </li>
            <li>
              <p>Reback Date:</p>
              <input type="text" name="RebackDate" id="datepicker1" value="" readonly />
            </li>
            <li>
              <p>Final Date:</p>
              <input type="text" name="FinalDate" id="datepicker3" value="" readonly />
            </li>
            <li>
              <p>Worker:</p>
              <?php 
                            $sql = "SELECT workerid,name FROM crew where workerid<> 0 ORDER By PeopleID";
                            $result = mysql_query($sql);

                            echo "<select name='workerid' id='name'>";
                            while ($row = mysql_fetch_array($result)) 
                            {
            ?>
              <option <?php if($formId != '' && $res['workerid'] == $row['workerid']){  echo " selected='select' "; } ?> value='<?php echo $row['workerid']; ?>'><?php echo $row['name']; ?> </option>
              <?php         } 
                            echo "</select>";
                            ?>
            </li>

Answer 1

You have to use Ajax and use change function for each textbox like this

Sample HTML

<input type="text" id="txt1"/>
<input type="text" id="txt2"/>
<input type="text" id="txt3"/>
<br>

<select id="select">
 <option>Lucy</option>
  <option>John</option>
  <option>Matt</option>
</select>

Jquery

 $("#txt1").change(function(e){
    if($("#txt2").val() == "" && $("#txt3").val() == "")
    {
        $("#select").find('option:contains("John")').attr('selected','selected'); 

    }

});

$("#txt2").change(function(e){
    if($("#txt3").val() == "")
    {
       $("#select").find('option').removeAttr("selected");
        $("#select").find('option:contains("Matt")').attr('selected','selected');
    }

});

$("#txt3").change(function(e){

       $("#select").find('option').removeAttr("selected");
        $("#select").find('option:contains("Lucy")').attr('selected','selected');


});

Demo