2014-02-26 199 views
1

在我的表單中,我有三個輸入和一個選擇框,In Select中只有三個值John,Matt和Lucy,但選擇框全部是自動的,完全取決於它上面的Input並輸入所有日期選擇器。更改選擇取決於輸入值

當第一個輸入有值然後選擇框的值應該是約翰在此之後當第二個輸入填寫值將馬特和最後3個輸入也得到值比選擇應該是露西 我的問題是我如何填充日期從數據庫在選擇時輸入有一個值

  <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> 
+0

您可以使用Ajax – krishna

+0

作爲@krishna提到,最好的方法將是使用Ajax。做一個onchange選擇框來獲得所需的結果,因爲你提到的問題 –

回答

0

你必須使用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

+0

不工作在我的本地任何線索.... – user3283373

+0

你有沒有在該頁面添加導入jQuery? – krishna

+0

如果不在html的頭部添加這個''script type =「text/javascript」src =「http://code.jquery.com/jquery-1.10.2.min.js」>' – krishna