我正在嘗試使用 Codeigniter 進行動態下拉串列，但我無法獲取下一個下拉串列中的值。當我在第一個下拉串列中選擇和選項時，不會填充第二個下拉串列：
我也不熟悉使用 AJAX，我只根據我搜索的內容撰寫腳本，所以請教我如何使動態下拉選單作業。
這是我的模型：
public function category()
{
$this->db->order_by("category", "ASC");
$query = $this->db->get('categories');
return $query->result();
}
function get_subcategory($parent_id)
{
$this->db->where('parent_id', $parent_id);
$this->db->order_by('sub_category', 'ASC');
$query = $this->db->get('sub_categories');
$output = '<option value="">Select Sub-Category</option>';
foreach ($query->result() as $row) {
$output .= '<option value="' . $row['id'] . '">' . $row['sub_category'] . '</option>';
}
return $output;
}
我的控制器：
public function category()
{
$data['title'] = 'List of Category';
$this->load->view('../admin/template/admin_header');
$this->load->view('../admin/template/admin_topnav');
$this->load->view('../admin/template/admin_sidebar');
$this->load->view('../admin/category/category', $data);
$this->load->view('../admin/template/admin_footer');
}
function get_subcategory()
{
if ($this->input->post('parent_id')) {
echo $this->Admin_model->get_subcategory($this->input->post('parent_id'));
}
}
看法：
<div class="form-group">
<label for="" class="control-label">Category</label>
<select name="category" id="category" class="custom-select select2" required>
<option value="">- Select Category -</option>
<?php
foreach ($category as $row) {
echo '<option value="' . $row->id. '">' . $row->category . '</option>';
}
?>
</select>
</div>
<div class="form-group">
<label for="" class="control-label">Sub Category</label>
<select name="sub_category" id="sub_category_id" class="custom-select select2" required>
<option value="">- Select Sub Category -</option>
</select>
</div>
和腳本：
$(document).ready(function() {
$('#category').change(function() {
var parent_id = $('#category').val();
if (parent_id != '') {
$.ajax({
url: "<?php echo base_url(); ?>admin/get_subcategory",
method: "POST",
data: {parent_id:parent_id},
success: function(data) {
$('#sub_category_id').html(data);
}
});
} else {
$('#sub_category_id').html('<option value="">Select Sub Category</option>');
}
});
});
uj5u.com熱心網友回復：
您的問題沒有提及，但您的 CSS 表明您select的 s 實際上正在使用Select2。當您將 a 初始化select為 Select2 時，它會創建初始 HTML 的副本，并為其添加樣式和 JS，這是您看到并與之互動的副本。原始 HTML 不再可見或根本無法使用。
因此，如果您稍后修改該原始 HTML，它將對您已經生成的 Select2 沒有影響，并且可以在頁面上看到與之互動的內容。
一種解決方案是在修改 Select2 后重新初始化它。
更新
我添加了一個作業片段，其中包含一些硬編碼的 HTML 來模擬 AJAX 回傳的內容。點擊運行試試。
$(document).ready(function () {
// Initialise Select2s
$('.select2').select2();
// Fake HTML, simulate what your AJAX returns
let fakedHTMLResponse = '<option value="water">Water</option><option value="juice">Juice</option><option value="beer">Beer</option>';
$('#category').change(function () {
var parent_id = $('#category').val();
// console.log('parent_id', parent_id);
if (parent_id != '') {
// Your AJAX call happens here, let's simulate the success
// response it gets back, and handle it the same way.
$('#sub_category_id').select2('destroy')
.html(fakedHTMLResponse)
.select2();
} else {
$('#sub_category_id').html('<option value="">Select Sub Category</option>');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<select id="category" class="select2" name="food">
<option value="">- Select Category -</option>
<option value="fruits">Fruits</option>
<option value="vegetables">Vegetables</option>
<option value="cakes">Cakes</option>
</select>
<select id="sub_category_id" class="select2" name="drink">
<option value="">- Select Sub Category -</option>
</select>筆記：
約定是在檢索資料時使用 GET，而在更改資料時使用 POST。您的 AJAX 呼叫只是檢索要顯示的資料，所以真的應該是 GET；
如果您要多次使用 jQuery 選擇器，快取它們是有意義的。例如，在上面的代碼中，您應該執行以下操作：
let $category = $('#category'); let $sub = $('#sub_category_id'); // And then every time you need to use that selectors, use the variable, eg: $category.select2(); $category.change(function ... $sub.select2('destroy'); // etc
uj5u.com熱心網友回復：
在你的成功回應中寫下這個并從那里洗掉 else。
success: function(data) {
$('#sub_category_id').append('<option value=>Select Sub Category</option>');
for (var i=0; i<data.length; i ) {
$('#sub_category_id').append($('<option>', {
value: data[i].id,
text : data[i].sub_category
}));
}
}
從控制器獲取陣列中的 AJAX 回應，然后像這樣通過 javascript 運行它。
id 是來自您的資料庫的 id，而 sub_category 是來自您的資料庫的 sub_category
使用 ajax 回應陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/475502.html
標籤：代码点火器