Javascript 使用JQUERY、AJAX和PHP填充选择框
我之前发布了一个问题,运气不太好,我希望清除第二个下拉列表的内容并重新填充该下拉列表,具体取决于第一个下拉列表中的值 我有以下选择框,如下所示:Javascript 使用JQUERY、AJAX和PHP填充选择框,javascript,php,jquery,ajax,codeigniter,Javascript,Php,Jquery,Ajax,Codeigniter,我之前发布了一个问题,运气不太好,我希望清除第二个下拉列表的内容并重新填充该下拉列表,具体取决于第一个下拉列表中的值 我有以下选择框,如下所示: <select name = "car" id="Cars" onchange="myFunction(this)"> <option value="0">Toyota</option> <option value="1">Audi</optio
<select name = "car" id="Cars" onchange="myFunction(this)">
<option value="0">Toyota</option>
<option value="1">Audi</option>
<option value="2">Suzuki</option>
</select>
public function getCars(){
$this->load->model('car_model');
$this->form_validation->set_rules('carId', 'carId', 'trim|xss_clean');
if($this->form_validation->run()){
$carId = $this->input->post('carId');
$carModels = $this->user_management_model->getCarModels($carId);
} else {
echo "error";
}
}
然后,我不知道如何返回PHP生成的数组中的每个元素,用ID=empthydropdown重新填充下拉列表。PHP生成的数组具有以下结构:
Array ( [0] => Array ( [ModelName] => R8 V6 Twin Turbo [ModelID] => 19 ) [1] => Array ( [ModelName] => A6 Hatchback [ModelID] => 107 ) )
为了澄清这个问题,我将如何获取数组中的每个元素,并将其作为新选项放到下拉列表中?有没有办法将数组返回到javscript,然后用ajax调用的success方法重新填充
如果您有任何帮助,我们将不胜感激,并提前向您致谢。此答案为您的代码提供了必要的修改 免责声明:在未看到确切安装的情况下,请注意,可能有多种因素导致安装无法正常工作。我不知道您的路由是如何设置的,或者您是否正在使用Firebug或其他控制台来观看ajax调用,但这应该为您提供构建块: 首先,将php更改为以json编码字符串的形式输出数组:
public function getCars(){
$this->load->model('car_model');
$this->form_validation->set_rules('carId', 'carId', 'trim|xss_clean');
if($this->form_validation->run()){
$carId = $this->input->post('carId');
$carModels = $this->user_management_model->getCarModels($carId);
// Add below to output the json for your javascript to pick up.
echo json_encode($carModels);
// a die here helps ensure a clean ajax call
die();
} else {
echo "error";
}
}
然后,修改脚本ajax调用以获得成功回调,该回调获取数据并将其添加到下拉列表中:
function myFunction(obj)
{
$('#emptyDropdown').empty()
var dropDown = document.getElementById("carId");
var carId = dropDown.options[dropDown.selectedIndex].value;
$.ajax({
type: "POST",
url: "/project/main/getcars",
data: { 'carId': carId },
success: function(data){
// Parse the returned json data
var opts = $.parseJSON(data);
// Use jQuery's each to iterate over the opts value
$.each(opts, function(i, d) {
// You will need to alter the below to get the right values from your json object. Guessing that d.id / d.modelName are columns in your carModels data
$('#emptyDropdown').append('<option value="' + d.ModelID + '">' + d.ModelName + '</option>');
});
}
});
}
再说一遍,这些都是构建模块。使用浏览器控制台或Firebug等工具查看AJAX请求和返回的数据,以便可以根据需要进行修改。祝你好运 谢谢,我会试一试的-我还在学习,所以我不太擅长在PHP和JS之间传递数据-你的所有代码似乎都与最后一行不同-我已经更新了我的问题,包括数组输出-你能告诉我这一行应该是什么吗:$'empthydropdown'。append+d.modelName+;如果数组如下所示:[0]=>array[ModelName]=>R8 V6 Twin Turbo[ModelID]=>19[1]=>array[ModelName]=>A6掀背车[ModelID]=>107@TotalNewbie-我已经修改了代码。此外,您可能希望在$.each函数中放置一个console.logd;确保你得到了预期的结果。如果它仍然不起作用,请添加console.log并在此处发布一条评论,其中包含console日志的内容,以便我们可以查看您的数据结构。您好,我现在可以使用了,非常感谢-我的一个小错误非常感谢help@cale_b-我正在开发网站的设置页面。在表单中,有一些值将在页面加载时从DB自动填充。我只使用了PHP,还使用了ajax&PHP。在PHP中,值是在页面加载时加载的,但在ajax中,值只有在页面加载后才会反映出来,因此我可以看到2-3ms的默认值。请建议哪种使用方法更好?谢谢你的代码。。它在我的网站上工作。。。。
public function getCars(){
$this->load->model('car_model');
$this->form_validation->set_rules('carId', 'carId', 'trim|xss_clean');
if($this->form_validation->run()){
$carId = $this->input->post('carId');
$carModels = $this->user_management_model->getCarModels($carId);
// Add below to output the json for your javascript to pick up.
echo json_encode($carModels);
// a die here helps ensure a clean ajax call
die();
} else {
echo "error";
}
}
function myFunction(obj)
{
$('#emptyDropdown').empty()
var dropDown = document.getElementById("carId");
var carId = dropDown.options[dropDown.selectedIndex].value;
$.ajax({
type: "POST",
url: "/project/main/getcars",
data: { 'carId': carId },
success: function(data){
// Parse the returned json data
var opts = $.parseJSON(data);
// Use jQuery's each to iterate over the opts value
$.each(opts, function(i, d) {
// You will need to alter the below to get the right values from your json object. Guessing that d.id / d.modelName are columns in your carModels data
$('#emptyDropdown').append('<option value="' + d.ModelID + '">' + d.ModelName + '</option>');
});
}
});
}