[英]How to create an Ajax Cascading/Chained/Dependant Dropdown list or Select Box?
[英]JQuery Chained/Cascading Dropdown events
我目前正在嘗試使用Flexbox Jquery插件設置一組鏈接選擇(這不是專門為鏈接設計的,但是可以用於鏈接)。
如果我顯式設置所有內容,則可以進行鏈接,但是我試圖使我的代碼枯竭並使它更易於理解。 因此,我想出了下面的代碼。
當前,所有盒子都首先加載,然后進行查詢。 我遇到的問題是,當我遍歷菜單時(如下所示),我失去了onSelect功能-它僅對我加載的最后一個菜單觸發。
我的理解是,由於我每次都使用一個不同的JQuery選擇器- $('#' + fbMenu.divId)
-然后為另一個菜單設置onSelect行為並不重要,但顯然並非如此。 每次裝入盒子時,我是否會以某種方式覆蓋綁定?
希望我不必為每個下拉列表指定onSelect功能,因為其中可能有很多。
非常感謝您提供的任何幫助!
$(document).ready(function() {
// Create the variables for data objects
var vehicleMakeFb = new Object();
var vehicleModelFb = new Object();
var vehicleTrimFb = new Object();
// Set up each menu with the divId, jsonUrl and the chlid menus that will be updated on select
vehicleMakeFb.divId = 'vehicle_vehicleMake_input';
vehicleMakeFb.jsonUrl = '/vehicles/getmakes';
vehicleMakeFb.children = [vehicleModelFb];
vehicleModelFb.divId = 'vehicle_vehicleModel_input';
vehicleModelFb.jsonUrl = '/vehicles/getmodels';
vehicleModelFb.children = [vehicleTrimFb];
vehicleTrimFb.divId = 'vehicle_vehicleTrim_input';
vehicleTrimFb.jsonUrl = '/vehicles/gettrims';
vehicleTrimFb.children = [];
// Create an array of all menu objects so that they can be iterated through
var allMenus = [vehicleMakeFb,vehicleModelFb,vehicleTrimFb];
// Create the parent menu
for (var i = 0; i < allMenus.length; i++) {
var fbMenu = allMenus[i];
alert(fbMenu.divId);
$('#' + fbMenu.divId).flexbox(fbMenu.jsonUrl + '.json', {
// Update the child menu(s), based on the selection of the first menu
onSelect: function() {
for (var i = 0; i < fbMenu.children.length; i++) {
var fbChild = fbMenu.children[i];
var hiddendiv = document.getElementById(fbMenu.divId + '_hidden');
var jsonurl1 = fbChild.jsonUrl + '/' + hiddendiv.getAttribute('value') + '.json';
alert(jsonurl1);
$('#' + fbChild.divId).flexbox(jsonurl1);
}
}
});
}
});
如果您將所有信息放在它們自己的元素上,我認為您會得到更好的結果。 盡管眾所周知我錯了,但我認為select函數的上下文變得混亂起來。
而不是將每個菜單設置為對象,請嘗試:
$(document).ready(function() {
var setupdiv = (function(divId, jsonUrl, children)
{
jQuery('#' + divId)
.data("jsonurl", jsonUrl)
.data("children", children.join(",#"));
// Create the parent menu
jQuery('#' + divId).flexbox(jsonUrl + '.json',
{
// Update the child menu(s), based on the selection of the first menu
onSelect: function()
{
var children = jQuery(this).data("children");
var jsonUrl = jQuery(this).data("jsonurl");
if(children)
{
children = jQuery('#' + children);
alert('children was true');
}
else
{
children = jQuery();
alert('children was false');
}
var hiddendiv = jQuery('#' + this.id + '_hidden');
children.each(function()
{
var childJsonUrl = jsonUrl + '/' + hiddendiv.val() + '.json';
alert(childJsonUrl);
$(this).flexbox(childJsonUrl);
});
}
});
});
setupdiv('vehicle_vehicleMake_input', '/vehicles/getmakes', ['vehicle_vehicleModel_input']);
setupdiv('vehicle_vehicleModel_input', '/vehicles/getmodels', ['vehicle_vehicleTrim_input']);
setupdiv('vehicle_vehicleTrim_input', '/vehicles/gettrims', []);
});
免責聲明
我以我的拼寫錯誤而聞名。 請在使用此代碼之前進行拼寫檢查;)
更新資料
我更改了代碼的前兩行,並且將制表符標准化,因為其中包含制表符和空格。 現在應該更容易閱讀。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.