jQuery peupler des éléments dans un Select en utilisant jQuery ajax json, php

Question

J'ai un champ de sélection. Je dois remplir avec les options prises d'une table mysql.
Voici un code php peu que je l'ai fait en utilisant le framework CodeIgniter de

$idcateg = trim($this->input->post('idcategory')); 
$array1 = array(
    'result' => $idcateg 
); 
echo json_encode($array1); 

Maintenant, l'appel jQuery ...

$.post("<?=base_url()?>index.php/rubro/list_ajax/", { 
    'idcategory' : idc }, 
    function(data){ 
     alert(data.result); 
    }, "json"); 

Le code fonctionne très bien. Quand j'appelle le poste, j'obtiens le categoryid en conséquence.
Maintenant, je modifier le code ci-dessus, donc je peux faire:

• Postez le appel ajax envoyer l'identifiant de la catégorie. cela se fait
• obtenir les sous-catégories pour cette catégorie, et construire le tableau *
• json_encode le tableau et l'écho *
• obtenir des résultats de retour dans jQuery ajax appel, decode et construire le < select> champ *

Le tableau doit être construit avec chaque élément ayant un sous-tableau avec un identifiant et un nom, n'est-ce pas? Merci beaucoup d'avance pour toute aide

Answer 1

Ce n'est pas très différent.

$idcateg = trim($this->input->post('idcategory')); 
$result = array(); 
$id = mysql_real_escape_string($idcateg); 
$res = mysql_query("SELECT * FROM subcategories WHERE category = $id"); 
while ($row = mysql_fetch_array($res)) { 
    $result[] = array(
    'id' => $row['subcatid'], 
    'desc' => $row['description'], 
); 
} 
echo json_encode($result); 

avec:

$.post("<?=base_url()?>index.php/rubro/list_ajax/", { 
    'idcategory' : idc }, 
    function(data) { 
    var sel = $("#select"); 
    sel.empty(); 
    for (var i=0; i<data.length; i++) { 
     sel.append('<option value="' + data[i].id + '">' + data[i].desc + '</option>'); 
    } 
    }, "json"); 

Answer 2

Oui. Vous souhaitez renvoyer un tableau d'objets codés JSON contenant des paires nom/valeur. Ensuite, vous pouvez créer votre sélection itérativement en utilisant ceux-ci.

$.post("<?=base_url()?>index.php/rubro/list_ajax/", 
    {'idcategory' : idc }, 
    function(data){ 
     var select = $('#selectName').empty(); 
     $.each(data.values, function(i,item) { 
      select.append('<option value="' 
           + item.id 
           + '">' 
           + item.name 
           + '</option>'); 
     }); 
    }, "json"); 

Answer 3

vous pouvez aussi utiliser $() charge.() Et votre code PHP générer les balises <option>

$return = ""; 
    while ($row = mysql_fetch_array($res)) { 
    $value = $row['value']; 
    $text = $row{'text']; 
    $return .= "<option value='$value'>$text</option>\n"; 
    } 
print $return; 
} 

...

$('#select').load("<?=base_url()?>index.php/rubro/list_ajax/"); 

Answer 4

Essayez le code suivant.

Contrôleur ---------

public function AjaxTest() { 

      $rollNumber = $this->input->post('rollNumber'); 
      $query = ""; 

      if($rollNumber !="") 
      { 
       $query = $this->welcome_model->get_students(); 
      } 
      else 
      { 
       $query = $this->welcome_model->get_students_informationByRoll($rollNumber); 
      } 

      $array = array($query); 
      header('Content-Type: application/json', true); 
      echo json_encode($array); 

     } 

Dans Voir Ajouter une option Sélectionnez

<input type="text" id="txtSearchRoll" name="roll" value="" /> 
<input type="button" name="btnSubmit" value="Search Students" onclick="return CheckAjaxCall();"/> 

    <select id="myStudents"> 
       <option> 
        --Select-- 
       </option> 
      </select> 

maintenant Scripts ----

function CheckAjaxCall() 
      { 
       $.ajax({ 
        type:'POST', 
        url:'<?php echo base_url(); ?>welcome/AjaxTest',      
        dataType:'json', 
        data:{rollNumber: $('#txtSearchRoll').val()},      
        cache:false, 
        success:function(aData){ 

         $('#myStudents').get(0).options.length = 0; 
         $('#myStudents').get(0).options[0] = new Option("--Select--", "0");   

         $.each(aData, function(i,item) { 
         $('#myStudents').get(0).options[$('#myStudents').get(0).options.length] = new Option(item[i].Name, item[i].roll); 
                              // Display  Value 
        }); 

        }, 
        error:function(){alert("Connection Is Not Available");} 
       }); 

       return false; 
      } 

Profitez de la code ....