0

私は現在、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);   
                    }

            }

        });
    }

});
4

1 に答える 1

1

それら自体の要素にすべての情報を入れると、より良い結果が得られると思います。私は間違っていることが知られていますが、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', []);
});

免責事項

私はつづりの間違いで知られています。このコードを使用する前にスペルチェックしてください;）

アップデート

コードの最初の2行を変更し、タブとスペースが混在しているため、インデントを正規化しました。今読みやすいはずです。

于 2011-06-24T00:57:11.577 に答える