我想從我的資料庫中的單個表創建兩個級聯下拉串列。
主類別的第一個下拉選單運行良好。即它使用AJAX 填充下拉串列中的所有資料。
現在，子類別的第二個下拉串列也被填充。但現在的問題是，當我選擇主類別時，它會在第二個下拉串列中獲取整個子類別列。
我想要的是，如果我選擇一個主類別，則只應填充資料庫中該行中的子類別，而不是整個列。
我將添加我的資料庫表的螢屏截圖以便更好地理解以及我嘗試過的代碼。
例如：- 如果我在主類別中選擇水果，則只有 aaaa 應填充在子類別中。同樣，如果我在主類別中選擇蔬菜，則應在子類別中填充 bbbb。
但是現在發生的事情是，如果我選擇 Fruits whole Sub Category column is getting Populated。
有人可以幫我解決這個問題，將不勝感激，在此先感謝。
我寫的 AJAX。
<script type="text/javascript">
$(document).ready(function()
{
$.ajax
({
url: "listdropdowns",
type: "GET",
dataType: "json",
success: function(loadmaindropdown)
{
var populatemain= $("#home_main_cat_dropdown_id");
$.each(loadmaindropdown, function(index, category)
{
$("<option>").val(category.main_category).text(category.main_category).appendTo(populatemain);
});
},
});
});
$(document).ready(function()
{
$("#home_main_cat_dropdown_id").change(function()
{
var main_category_values = (this.value) ;
$.ajax
({
url: "listdropdowns",
type: "GET",
dataType: "json",
success: function(loadsubdropdown)
{
var populatesub = $("#home_sub_cat_dropdown_id");
$.each(loadsubdropdown, function(index, category)
{
$("<option>").val(category.sub_category).text(category.sub_category).appendTo(populatesub);
console.log(home_sub_cat_dropdown_id.value);
});
},
});
});
});
</script>
在我的 DAO 中，我從中獲取了整個類別串列
public List<Category> selectAllCategory() throws SQLException, ClassNotFoundException
{
List<Category> listCategory = new ArrayList<>();
Connection conn = DatabaseConnection.initializeDatabase();
String query = " select * from list_of_categories ";
try
{
PreparedStatement prestmt = conn.prepareStatement(query);
ResultSet rs = prestmt.executeQuery();
while (rs.next())
{
int id = rs.getInt("id");
String main_category = rs.getString("main_category");
String sub_category = rs.getString("sub_category");
listCategory.add(new Category(id,main_category,sub_category));
}
}
我的控制器
public void populate_dropdowns(HttpServletRequest request, HttpServletResponse response)throws SQLException, IOException, ClassNotFoundException, ServletException, ParseException
{
try
{
List<Category> listCategory = productDAO.selectAllCategory();
String json = new Gson().toJson(listCategory);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
catch (SQLException e)
{
e.printStackTrace();
throw new ServletException(e);
}
}
uj5u.com熱心網友回復：
我像這樣修改了我的代碼來解決我的問題，現在它可以正常作業了。
我為 DAO 和 Controller 中的下拉選單創建了單獨的方法，并根據我的需要獲取資料。
我的 AJAX 功能：-
<script type="text/javascript">
$(document).ready(function()
{
$.get("listmaindropdown",function(loadmaindropdown)
{
var aaaa = $("#home_main_cat_dropdown_id");
$.each(loadmaindropdown, function(index, category)
{
$("<option>").val(category.main_category).text(category.main_category).appendTo(aaaa);
});
$("#home_main_cat_dropdown_id").change(function()
{
var main_category_values = (this.value);
$.get("listsubdropdown",function(loadsubdropdown)
{
var bbbb = $("#home_sub_cat_dropdown_id")
bbbb.find('option').remove();
$.each(loadsubdropdown, function(index, category)
{
if(main_category_values == category.main_category)
{
$("<option>").val(category.sub_category).text(category.sub_category).appendTo(bbbb);
}
});
});
});
});
});
}
</script>
道：-
public List<Category> selectonlymaincategory() throws SQLException, ClassNotFoundException
{
List<Category> listCategory = new ArrayList<>();
Connection conn = DatabaseConnection.initializeDatabase();
String query = " select distinct main_category from list_of_categories order by main_category ";
try
{
PreparedStatement prestmt = conn.prepareStatement(query);
ResultSet rs = prestmt.executeQuery();
while (rs.next())
{
String main_category = rs.getString("main_category");
listCategory.add(new Category(main_category));
}
}
catch (SQLException e)
{
e.printStackTrace();
}
return listCategory;
}
public List<Category> selectonlysubcategory() throws SQLException, ClassNotFoundException
{
List<Category> listCategory = new ArrayList<>();
Connection conn = DatabaseConnection.initializeDatabase();
String query = " select * from list_of_categories order by sub_category";
try
{
PreparedStatement prestmt = conn.prepareStatement(query);
ResultSet rs = prestmt.executeQuery();
while (rs.next())
{
int id = rs.getInt("id");
String main_category = rs.getString("main_category");
String sub_category = rs.getString("sub_category");
listCategory.add(new Category(id,main_category,sub_category));
}
}
catch (SQLException e)
{
e.printStackTrace();
}
return listCategory;
}
控制器小服務程式：-
public void populate_maindropdown(HttpServletRequest request, HttpServletResponse response)throws SQLException, IOException, ClassNotFoundException, ServletException, ParseException
{
try
{
List<Category> listCategory = productDAO.selectonlymaincategory();
String json = new Gson().toJson(listCategory);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
catch (SQLException e)
{
e.printStackTrace();
throw new ServletException(e);
}
}
public void populate_subdropdown(HttpServletRequest request, HttpServletResponse response)throws SQLException, IOException, ClassNotFoundException, ServletException, ParseException
{
try
{
List<Category> listCategory = productDAO.selectonlysubcategory();
String json = new Gson().toJson(listCategory);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
catch (SQLException e)
{
e.printStackTrace();
throw new ServletException(e);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/480005.html
標籤：jQuery 阿贾克斯 PostgreSQL jsp 级联下拉
上一篇：如何在SQL中按列求和？