2013-09-23 117 views
0

我想填充使用jquery和ajax的下拉列表。用jquery填充下拉列表

這是我的代碼的樣子。

<script> 
      $(document).ready(function(){        //This script uses jquery and ajax it is used to set the values in 
       $("#day").change(function(){    // the time field whenever a day is selected. 

         var day=$("#day").val(); 
         var doctor=$("#doctor").val(); 

         $.ajax({ 
          type:"post", 
          url:"time.php", 
          data:"day="+day+"&doctor="+doctor, 
          success:function(data){ 
          $("#time").html(data); 
          } 
         }); 

       }); 
      }); 
    </script> 

這裏的time.php

//some code for connecting to database 

$doctor = $_POST['doctor']; 

$day = $_POST['day']; 

$query="SELECT * FROM schedule WHERE doctor='" .$doctor."'AND day='" .$day. "'"; 

$result = mysqli_query($con, $query); 

echo" 
<select name='timing' id='timing'>"; 
$i = 0;         //Initialize the variable which passes over the array key values 

$row = mysqli_fetch_assoc($result); //Fetches an associative array of the row 
$index = array_keys($row);    // Fetches an array of keys for the row. 

    while($row[$index[$i]] != NULL) 
    { 

     if($row[$index[$i]] == 1) {    
      $res = $index[$i]; 
      echo jason_encode($res); 

      echo "<option value='" . $index[$i]."'>" . $index[$i] . "</option>"; 
    } 
    $i++; 
    }  

    echo "</select>"; 

    ?> 

這只是把名單上time.php成一個div時間我的網頁上。有什麼方法可以在時間.php中從列表中抓取單個選項並將它們添加到我的頁面上的下拉列表中?

在此先感謝。

+0

在這裏看到:http://stackoverflow.com/questions/4814512/how-to-create-dropdown-list-dynamically-using-jquery –

+0

[自動填充的jQuery](http://jqueryui.com/自動完成/)沒有用? –

回答

2

嘗試:

success:function(data) 
{ 
var option = ''; 
$.each(data.d, function(index, value) { 
    option += '<option>' + value.YourReturnParam + '</option>'; 
    }); 
$('#yourDdlID').html(option); 
} 
+0

好的。我會在這裏的YourReturnParam? 也想要類似的選項+ =「<選項值='value.YourReturnParam。」「+ value.YourReturnParam +」「 因此,我可以通過表格 – Ajit

+0

YourReturnParam意味着什麼json給你綁定。 –

+0

嗨,我已經發布了腳本文件。你能告訴我如何在這裏jason_encode? – Ajit

0
<script> 
     $(document).ready(function(){        //This script uses jquery and ajax it is used to set the values in 
      $("#day").change(function(){    // the time field whenever a day is selected. 

        var day=$("#day").val(); 
        var doctor=$("#doctor").val(); 

        $.ajax({ 
         type:"post", 
         url:"time.php", 
         data:"day="+day+"&doctor="+doctor, 
         success:function(data){ 
         var jdata=eval('('+data+')');; 
         var str=''; 
         for(var i=0;i<jdata.length;i++) 
         { 
          str.='<option>'+jdata[i]+'</option>'; 
         } 
         $("#time").html(str); 
         } 
        }); 

      }); 
     }); 

time.php將返回像

$解析度=陣列( 'A', 'B', 'V') 回波json_encode ($水庫);

+0

嗨,你能告訴我什麼是a,b,v嗎? – Ajit

0

如果在成功回調中使用的數據變量是JSON或數組,它會更容易。

success:function(data) 
{ 
    var option = $('#time'); 

    //Remove old options 
    option.empty(); 

    //It makes it easier if you create an array to store all of the values that you want to 
    //populate the select tag with. I'm not sure if the data that's returned is in the form of an array or not 
    var newOptions = {'key1': 'value1','key2': 'value2', 'key3': 'value3'}; 

    //Loop thru and change each option tag 
    $.each(newOptions, function(key, value) { 
     option.append($('<option></option>').attr('value', value).text(key)); 
    }); 
} 

和HTML可能是這個樣子,我猜?

<select id="time"> 
    <option value="val">Text</option> 
    <option value="val">More Text</option> 
</select>