Question

在我的表格中我有三个输入和一个选择框，在选择中只有三个值John，Matt和Lucy，但是选择框全部是自动的，它完全依赖于位于它上方的输入并且输入具有所有的日期选择器。

当第一个输入有值时，那么选择框值应该是约翰，此后第二个输入填写的值将是马特，最后3个输入也得到的值比选择应该是露西我的问题是当输入有值

时，如何在select中填充数据库中的日期

            <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

您必须使用Ajax并对每个文本框使用change函数，如此

示例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

更改选择取决于输入值

1 个答案: