如何显示基于第一个选项的选择选项值

Question

我正在使用Codeigniter 3.1.1。我希望"城市"选项基于使用"状态"选项选择的值显示。实际上，当选择"州"选项时，"城市"选择选项不会自动填充。我试图链接最新的jQuery，但它仍然不起作用。非常感谢您的帮助。

我的控制器.php

class HomeController extends CI_Controller {
public function __construct() { 
parent::__construct();
$this->load->database();
}
public function index() {
$states = $this->db->get("demo_state")->result();
$this->load->view('myform_view', array('states' => $states )); 
} 
public function myformAjax($stateID) { 
$result = $this->db->where("state_id",$stateID)->get("demo_cities")->result();
echo json_encode($result);} }

视图：

<select name="state" id="state" class="form-control" style="width:350px">
<option value="">---Select State---</option>
<?php foreach($states as $key => $value) 
{ 
echo "<option value='".$value->id."'>".$value->name."</option>";
} ?>
</select>
<select name="city" id="city" class="form-control" style="width:350px"></select>

阿贾克斯：

$(document).ready(function() {
$('select[name="state"]').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/MyController/myformAjax/'+stateID,
type: "POST",
dataType: "json",
success:function(data) {
$('select[name="city"]').empty();
$.each(data, function(key, value) {
$('select[name="city"]').append('<option value="'+ value.id +'">'+ value.name +'</option>');
});
}
});
}else{
$('select[name="city"]').empty();
}
});
});

Answer 1

您没有指定运行代码时遇到的问题，或者输出是什么或错误是什么，因此，我们无法知道真正的问题是什么。但是，我正在分享您想要的工作代码(我的项目的摘录(;我还根据您的需要更改了值。

这遵循不同的方法，因为AJAX期望HTML返回，并且该HTML是在PHP controller中形成的，而不是在jQuery中形成的success，然后简单地添加到所需的id中。

阿贾克斯

$(document).ready(function() {
$('#state').on('change', function() {
var stateID = $(this).val();
if(stateID) {
$.ajax({
url: '/MyController/myformAjax/'+stateID, // your-controller-path 
// sometimes relative path might not work try with base_url() instead or configure your .htaccess properly
type: "POST",
dataType: "html", // expecting html
success:function(data) {
$('#city').empty();
$('#city').html(data); // change innerHTML of id='city'
}
});
}else{
$('#city').empty(); // $('#city').html('');
}
});
});

控制器

public function myformAjax($stateID) { 
$cities = $this->db->where("state_id",$stateID)->get("demo_cities")->result(); // get all the cities -- probably want to do this in model
$cityOpt = '<option value="">--Select City--</option>'; // first option -- to prevent first option from automatically selecting when submitting data
foreach($cities as $city)
{
$cityOpt .= '<option value="'.$city->id.'">'.$city->city_name.'</option>'; // concatenate the next value
}
echo $cityOpt;
}

看看它是否对你有帮助。