jQuery 使用 jQuery ajax json、php 将项目填充到 Select 中

Posted 2023-02-24

【中文标题】jQuery 使用 jQuery ajax json、php 将项目填充到 Select 中

【英文标题】：jQuery populate items into a Select using jQuery ajax json, php

【发布时间】：2010-12-17 06:31:38

【问题描述】：

我有一个选择字段。我必须填写从 mysql 表中获取的选项。 这是我使用 codeigniter 框架完成的一些小 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");

代码运行良好。当我打电话给帖子时，我得到了 categoryid 作为结果。 现在，我应该修改上面的代码，所以我可以这样做：

发布发送类别 ID 的 ajax 调用。这完成了 获取该类别的子类别，并构建数组 * json_encode 数组并回显 * 在 jQuery ajax 调用中返回结果，解码并构建 字段 *

数组应该由每个元素组成，每个元素都有一个带有 id 和 name 的子数组，对吧？ 非常感谢您的任何帮助

【参考方案1】：

差别不大。

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

【讨论】：

喜克莱图斯。工作完美。你现在能告诉我如果什么都没有返回怎么办？ （即mysql返回空）..我怎么知道结果是否为空？谢谢

data.lenght 将为 0

或者，代替for，可以是：$.each(data, function(key, val) sel.append($("<option>").val(data[key].id).text(data[key].desc)); );;

【参考方案2】：

是的。您想要传回包含名称/值对的 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");

【参考方案3】：

您也可以只使用 $().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/");

【讨论】：

很棒的提示/想法...会尝试的！谢谢斯科特！！

请注意，根据我的经验，由于使用 innerhtml (webbugtrack.blogspot.it/2007/08/…) 的 DOM 操作中的错误，此解决方案可能无法在 IE8 及更低版本上运行 - 但它在其他浏览器上运行良好，包括 IE 9 +

【参考方案4】：

试试下面的代码。

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

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;
            

享受代码....