jQuery 使用 jQuery ajax json、php 将项目填充到 Select 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1745704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery populate items into a Select using jQuery ajax json, php
提问by Enrique
I have a select field. I must fill with options taken from a mysql table.
Here is some little php code I have done using codeigniter framework
我有一个选择字段。我必须填写从 mysql 表中获取的选项。
这是我使用 codeigniter 框架完成的一些小 php 代码
$idcateg = trim($this->input->post('idcategory'));
$array1 = array(
'result' => $idcateg
);
echo json_encode($array1);
Now, the jQuery call...
现在，jQuery 调用...
$.post("<?=base_url()?>index.php/rubro/list_ajax/", {
'idcategory' : idc },
function(data){
alert(data.result);
}, "json");
The code works fine. When I call the post, I get the categoryid as a result.
Now, I should modify the code above, so I can do:
该代码工作正常。当我调用帖子时，我得到了 categoryid 作为结果。
现在，我应该修改上面的代码，这样我就可以：
- post the ajax call sending the category id. this is done
- get subcategories for this category, and build the array *
- json_encode the array and echo *
- get results back in jQuery ajax call, decode and build the < select > field *
- 发布发送类别 ID 的 ajax 调用。这个做完了
- 获取该类别的子类别，并构建数组 *
- json_encode 数组并回显 *
- 在 jQuery ajax 调用中返回结果，解码并构建 <select> 字段 *
The array should be built with each element having a sub-array with id and name, right? Thanks a lot in advance for any help
数组应该用每个元素都有一个带有 id 和 name 的子数组来构建，对吗？非常感谢您的帮助
回答by cletus
It's not much different.
它没有太大的不同。
$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);
with:
和：
$.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");
回答by tvanfosson
Yes. You want to pass back a JSON-encoded array of objects containing name/value pairs. Then you can create your select iteratively using these.
是的。您想传回包含名称/值对的 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");
回答by Scott Evernden
you could also just use $().load() and have your PHP code generate the <option>tags
你也可以只使用 $().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/");
回答by Md. Nazrul Islam
Try the following Code.
试试下面的代码。
In Controller ---------
在控制器中 ---------
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);
}
In View Add a Select Option
在视图中添加选择选项
<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>
Now 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;
}
Enjoy the code....
享受代码......
