Two select boxes : the first one control the ipopts of the second

AlexandreDelachapelle

Hi everybody,

My config :
- DataTables 1.10.4
- Editor 1.3.3
- TableTools 2.2.3

I am using two select boxes : "city" and "postcode".
I want that the ipOpts-Fields of my second select box change depending on selecting a value in the first select box.
I found a solution here : http://www.datatables.net/forums/discussion/13925/two-select-boxes-can-first-select-box-control-the-ipopts-of-the-second
But I don't understand this solution... So if someone understand, could you briefly explain me how to implement it ?
Thanks for your help !
Here is my code :

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {   
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/todo.php",
        table: "#example",
        fields: [ {
                label: "Lastname:",
                name: "last_name"
            }, {
                label: "City:",
                name: "city",
                type: "select", 
                ipOpts: [
                    { label: "Paris", value: "Paris" },
                    { label: "London", value: "London" }
                ]
            }, {
                label: "Postcode:",
                name: "postcode",
                type: "select",
                ipOpts: [
                    { label: " A", value: " A" },   /* Paris */
                    { label: " B", value: " B" },   /* Paris */
                    { label: " C", value: " C" },   /* Paris */
                    { label: " 1", value: " 1" },   /* London */
                    { label: " 2", value: " 2" },   /* London */
                    { label: " 3", value: " 3" }    /* London */
                ]
            }
        ]
    } );

    $('#example').DataTable( {             
        dom: "Tfrtip", 
        ajax: "../php/todo.php",
        columns: [
            { data: "last_name" },
            { data: "city" },
            { data: "postcode" }
        ],
        tableTools: {
            sRowSelect: "os",
            aButtons: [
                { sExtends: "editor_create", sButtonClass: "save-collection", editor: editor }, /* id:I6 */
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor },
            ]
        }
    } );
} );

allan

Sounds like you want the dependent() method that was added in 1.4! You can download 1.4 and continue your trial with it from the download page.

Allan

AlexandreDelachapelle

Thanks for your response Allan !
I installed the 1.4 and look at this example : http://editor.datatables.net/examples/api/dependentFields.html and the API reference : http://editor.datatables.net/reference/api/dependent()#
The solution is certainly obvious, but I don't know how to implement a function where the values of the second select box change depending on selecting a value in the first select box.
I understand how to hide or show a select box, but here, i need to change the value of the second box, not hide this box.

Alex

allan

You need to use the options parameter in the call back data structure for dependent(). For example:

{
    "options": {
        "position": [
            "Director",
            "Senior VP",
            "VP"
        ]
    }
}

To set the options of the position field to be those three options.

Have a look through the dependent() documentation for information on the options parameter, it is described there.

Allan

AlexandreDelachapelle

Ok, I found the solution.
Thanks Allan

AlexandreDelachapelle

Ok, I found the solution.