代码之家 › 专栏 › 技术社区 › Enrique

jquery使用jquery ajax json、php将项目填充到select中

post json ajax jquery php

Enrique · 技术社区 · 15 年前

我有一个选择字段。我必须用MySQL表中的选项来填充。
下面是一些使用codeigner框架完成的PHP代码

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

现在,jquery调用…

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

代码工作正常。当我给这个职位打电话时,结果我得到了这个类别ID。
现在,我应该修改上面的代码,这样我可以:

发布发送类别ID的Ajax调用。
获取此类别的子类别,并构建数组*
json_对数组和echo进行编码*
在jquery ajax调用中获取结果,解码并构建<select>字段*

数组应该用每个元素都有一个ID和名称的子数组来构建,对吗? 谢谢你的帮助

4 回复 | 直到 11 年前

cletus 15 年前

没什么不同。

$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);

用:

$.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");

tvanfosson 15 年前

对。您希望返回包含名称/值对的对象的JSON编码数组。然后您可以使用这些迭代地创建您的选择。

$.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");

Scott Evernden 15 年前

您也可以使用$().load()并让您的PHP代码生成 <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/");

Md. Nazrul Islam 11 年前

尝试以下代码。

控制器中---------

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);

        }

在视图中添加选择选项

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

现在脚本----

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;
            }

享受代码……