[英]Populate Select based on another Select
我正在嘗試根據第一個 Select 框的選擇填充一個 Select 框,但我在執行此操作時遇到了一些麻煩。 根本沒有任何反應。
到目前為止我所擁有的(這是我的頁腳):
<script src="./plugins/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.category").change(function(){
var selectedCategory = $(".category option:selected").val();
$.ajax({
type: "POST",
url: "../inc/get_subcat.php",
data: { category : selectedCategory }
}).done(function(data){
$("#subcategory").html(data);
});
});
});
</script>
帶有 div 的頁面位於 /pages/file.php:
<div class="col-md-6">
<div class="form-group">
<label class="control-label">SubCategory</label>
<div id="subcategory"> </div>
</div> </div>
執行查詢的文件位於另一個文件夾 (inc/get_subcat.php) 中:
<?php
include("config.php");
if(isset($_POST['category'])){
$cat = validar($_POST['category']);
$query = "SELECT id, subcategory FROM subcategories WHERE catid = ?";
#Prepare stmt or reports errors
($stmt = $mysqli->prepare($query)) or trigger_error($mysqli->error, E_USER_ERROR);
#Execute stmt or reports errors
$stmt->bind_param("i", $cat);
$stmt->execute() or trigger_error($stmt->error, E_USER_ERROR);
#Save data or reports errors
($stmt_result = $stmt->get_result()) or trigger_error($stmt->error, E_USER_ERROR);
#Check if are rows in query
if ($stmt_result->num_rows>0) {
echo "<select class='form-control' id='subcategory' name='subcategory'>";
# Save in $row_data[] all columns of query
while($row_data = $stmt_result->fetch_assoc()) {
# Action to do
echo "<option value='$row_data[id]'>$row_data[category]</option>";
}
echo "</select>";
}
$stmt->close();
}
?>
有人可以幫助我嘗試修復此錯誤嗎? 盡管嘗試了幾個小時仍無法修復。
謝謝!
編輯:這是帶有所有 Select 框的 HTML 代碼:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Category</label>
<select class='form-control' id='category' name='category'><option value='1'>Categoria 1</option><option value='2'>Categoria 2</option></select> </div>
</div>
<div class="col-md-6" id="subcategory">
</div>
</div>
在您的 HTML 中,您有<select class='form-control'
...等
所以<select>
只有一個類“form-control”。
但是您的選擇器是$("select.category").change
...等。 這意味着它正在尋找一個在類屬性中帶有“類別”的選擇(選擇器中的點.
表示一個類)。 這樣的元素不存在,因此什么也沒有發生。
也許您打算使用 ID(在這種情況下是$("#category").change
...etc)? 要么,要么您需要編寫<select class='form-control category'
...etc 才能工作。
您的數組數據或查詢可能有問題。 所以請先檢查一下。 我在這里發布依賴下拉列表的工作示例可能會對您有所幫助。
PHP 代碼
$sub_category // Your array of Subcategory;
if ($sub_category) {
echo '<option value="">Sub Category</option>';
foreach ($sub_category as $sub_category) {
$selected = '';
if($sub_category['sub_category_id'] == $data['product']['sub_category_id'])
{
$selected = 'selected';
}
echo '<option value="' . $sub_category['sub_category_id'] . '" '.$selected.'>' . $sub_category['sub_category'] . '</option>';
}
}
JS代碼
<script type="text/javascript">
loadSubCategory();
jQuery(document).ready(function($) {
$(document).on('change', '.category_id', function(event) {
event.preventDefault();
loadSubCategory();
});
});
function loadSubCategory()
{
var category_id = $(".category_id option:selected").val();
$.ajax({
url: 'Your Path Of server Function',
type: 'post',
data: {category_id: category_id, product_id : "<?= $product['product_id']?>" },
cache: false,
success: function (resp) {
if(resp)
{
$('.sub_category_id').html(resp);
} else {
$('.sub_category_id').html('<option value="">Sub Category</option>');
}
}
})
}
</script>
HTML 代碼
<div class="form-group">
<b>Product Category </b>
<select class="form-control category_id" id="category_id" name="category_id">
<option>Category</option>
<?php
<option value="<?= $value['category_id'] ?>" <?=$selected ?> ><?= $value['category'] ?></option>
</select>
</div>
<!-- Category End -->
<!-- Sub Category Start -->
<div class="form-group">
<b>Product Sub Category </b>
<select class="form-control sub_category_id" name="sub_category_id">
<option value="">Sub Category</option>
<option value="">Sub Category</option>
<option value="20">Books Stationery</option>
<option value="21">Gaming and Accessories</option>
<option value="22">Music Musical Instruments</option>
</select>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.